526互联

11月9日背景属性

发布时间 2023-11-09 18:37:59作者: songjunwan

目录

背景属性

背景颜色以及背景图片的添加

背景颜色就是常用的background-color这个属性这就不多讲了。

背景图片的添加

需要用到background-image这个属性

代码如下

background-image: url("");

双引号下面添加图片链接

背景图片的选择

属性background-repeat是用于给背景图片选择放置方式

值 描述
repeat(默认) 背景图片平铺排满整个网页
repeat-x 背景图片只在水平方向上平铺
repeat-y 背景图片只在垂直方向上平铺
no-repeat 背景图片不平铺

然后实例代码如下

background-repeat属性值为repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        #body1{
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
            background-repeat: repeat;
        }

    </style>

</head>
<body id="body1">
</body>
</html>

效果如图

background-repeat属性值为repeat-x

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        #body1{
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
            background-repeat: repeat-x;
        }

    </style>

</head>
<body id="body1">
</body>
</html>

效果如下

background-repeat属性值为repeat-y

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        #body1{
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
            background-repeat: repeat-y;
        }

    </style>

</head>
<body id="body1">
</body>
</html>

效果如图

background-repeat属性值为no-repeat

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        #body1{
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
            background-repeat: no-repeat;
        }

    </style>

</head>
<body id="body1">
</body>
</html>

效果如图

背景图片位置

这里需要用到background-position这个属性

假设现在有个图片如下，我要它瓶子那一块的属性

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-image: url("测试.png");
            background-position: -200px -611px;
        }

    </style>

</head>
<body id="body1">
<div>背景</div>
</body>
</html>

效果如下

这里就实现了，首先建议使用谷歌浏览器进行修改因为方便。

该函数只能移动x和y轴，第一个数字是移动x轴的，第二个数字是移动y轴的。

特殊例子

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        #div0{
            height: 500px;
            background-color: blue;
        }
        #div1{
            height: 500px;
            background-color:red;
        }
        #div2{
            width: 100%;
            height: 500px;
            background-image: url("测试.png");
            background-attachment: fixed
        }
        #div3{
            height: 500px;
            background-color: rebeccapurple;
        }
        #div4{
            height: 500px;
            background-color: deeppink;
        }
    </style>


</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</body>
</html>

效果如下