CSS基础之背景属性设置

小猪弟

已于 2022-04-02 21:05:56 修改

阅读量3.2k

点赞数 4

分类专栏： CSS 文章标签： css background rgba 背景设置 opacity

于 2022-03-01 15:23:52 首次发布

本文链接：https://blog.csdn.net/u011863822/article/details/123207012

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

CSS设置背景，不但包括背景的颜色，还包括背景图片等设置，还是老规矩演示比较靠谱。

背景

背景颜色

背景颜色和文本颜色不同，一个是设置的是文本的颜色，一个是背景的颜色。使用的是backgrou-color属性

选择器{
    background-color: transparent | 颜色
}

transparent 背景颜色为透明。一般情况下背景颜色默认就是透明。
颜色对应color的颜色标准即可。

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
   div{
       width: 100px;
       height: 100px;
       background-color: #d10000;
   }
    </style>
</head>
<body>
<div>
    test
</div>

</body>
</html>

在这里插入图片描述

背景图片

除了设置一些背景颜色，最重要的就是会引入背景图片，是通过background-image属性进行设置的。

选择器{
    background-image: none | url(图片地址)
}

none ：无背景图片，默认值
url ：可以使用绝对路径和相对路径得到图片地址。

背景可以添加颜色也可以添加图片，不过图片会将颜色覆盖掉。

其实这个时候应该好奇吧，毕竟已经有标签<img>为什么还要有这个标签？

对比img：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            color: green;

        }

        #t2 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            color: green;

        }
    </style>
</head>
<img>
<div id="t1">
    好人
</div>
&nbsp;
&nbsp;
<hr/>
<div id="t2">
    <img src="jpg/t1.jpg">
坏人
</div>

</body>
</html>

在这里插入图片描述

可以看出两者呈现的区别了，一个是背景文本显示在其上面，而另一个和文本时并列存在。

还有img标签导入的时候，只会导入依次，而background-image却是将其铺满，会自动截取。

其实还有一个那就是使用background-image会更加容易控制图片的呈现方式和位置，比img这一方面要强大的多。

补充背景渐变色

格式：

background-image: linear-gradient(to  方向词 [ 在一个方向词] , 起始颜色, 结束颜色);

这个不解释直接演示就明白了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        div{
            height: 100px;
            background-image: linear-gradient(to top left, red, green);
        }
    </style>
</head>
<body>
<div  ></div>

</body>
</html>

在这里插入图片描述

背景平铺

其实上面的通过属性导入的图片可以将所在的div铺满，自然也可以设置的，如下：

选择器{
    background-repeat: repeat | no-repeat | repeat-x |repeat-y
}

repeat : 背景图像纵向和横向平铺。默认是这个值。
no-repeat：背景图片不平铺
repeat-x: 背景图标横向平铺
repeat-y：背景图片纵向平铺

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: repeat;

        }

        #t2 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat:no-repeat ;

        }
        #t3 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat:repeat-x ;

        }
        #t4 {
            width: 900px;
            height: 100px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat:repeat-y;

        }
    </style>
</head>
<img>
<div id="t1">

</div>
&nbsp;
&nbsp;
<hr/>
<div id="t2">

</div>
&nbsp;
&nbsp;
<div id="t3">

</div>
&nbsp;
&nbsp;
<hr/>
<div id="t4">

</div>
</body>
</html>

在这里插入图片描述

背景位置

利用background-position 属性可以修改图片在背景中位置。

选择器{
   background-position : x y 
}

参数：x坐标和y坐标的值可以使用方位名字或者精确单位。两者之间是空格，不要记错了。

参数	说明
精确单位	百分数或者由浮点数字+单位标识符组成的长度值
方位名词	top\| center \|bottom \|left \|right

方位名词

对坐标不同的表达方式还有些不同，所以先些访问名词的演示。

x轴上的方位名词：left|center|right
y轴上的方位名词：top|center|bottom

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1 {
            width: 900px;
            height: 400px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: no-repeat;
            background-position: left center;

        }


    </style>
</head>
<img>
<div id="t1">

</div>

</div>
</body>
</html>

在这里插入图片描述

而方位名词有一个特点，那就是其如果是left自然就是x轴，所以其x,y的值放反也可以的比如将上面该做

   #t1 {
            width: 900px;
            height: 400px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: no-repeat;
            background-position:  center left;

        }

在这里插入图片描述

效果呈现一样。当然如果其中一个是center可以省略，比如上面可以写作

  #t1 {
            width: 900px;
            height: 400px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: no-repeat;
            background-position: left;

        }

在这里插入图片描述

如果两个都是center，至少些一个center

        #t1 {
            width: 900px;
            height: 400px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: no-repeat;
            background-position:center ;

        }

在这里插入图片描述

还有一种如果标签内的范围要小于图片，如果是img，就会图片标签定义的范围，但是使用background-image就会只显示范围大小一样的图片。而这个时候的方位名字也有特点，比如这样：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1 {
            width: 300px;
            height: 40px;
            background-color: #d10000;
            background-image: url("jpg/t1.jpg");
            background-repeat: no-repeat;
            background-position:center ;

        }


    </style>
</head>
<img>
<div id="t1">

</div>
s
</div>
</body>
</html>

在这里插入图片描述

可以看出显示的是xy轴将图片取中而显示。

使用方位名词特点：

因为xy轴的特性，所以前后顺序可以修改。
如果其中一个是center，则可以可以省略。如果两个都是center那必须写一个。

但是方位名词也有其弊端，那就是无法更加精确，比如在中间靠右等，所以就需要了精确定位了。

精确单位

如果使用了数值作为精确坐标，那么第一个值肯定是x坐标，第二个肯定是y坐标。
如果只用了一个数值，那么这个数值一定是x轴坐标，而且y轴默认是center

这个就不在演示了，毕竟意义不大。

参数混合

这个听名字觉得很恐怖，其实就是将前面两个一起使用。

如果混合使用的，第一个值是x坐标，第二个值是y坐标。

这个直接来演示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
     body{
         background-image: url("jpg/test1.jpg");
         background-position: center 40px;
         background-repeat: no-repeat;
     }

    </style>
</head>
 <body>

</body>
</html>

在这里插入图片描述

背景图像固定（背景附着）

很多网站滚动看网站的时候，发现内容在变但是其背景图片却一致保持一致，这个就使用了大量这个背景固定属性。

选择器{
    background-attachment: scroll | fixed
}

background-attachment后期甚至可以制作视觉差的滚动效果。

scroll ：背景图像随着对象内容滚动，不写默认是这个值。
fixed：背景图像固定，就是只要在这个范围背景就会时这个图片。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
     body{
         background-image: url("jpg/test1.jpg");
         background-position: center 40px;
         background-repeat: no-repeat;
         background-attachment: fixed;
     }


    </style>
</head>
 <body>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
 <h1>test</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8tzdQbU4-1646119219426)(F:\文档\笔记\前端\CSS\5：背景属性设置.assets!在这里插入图片描述
)]

可以看出图片永远在后面，你下滑看文字也不会改变。

背景复合写法

这个和字体的复合写法，一样就是所有的属性写出来。通过background属性定义，但是没有特定顺序，不过一般习惯顺序如下：

background :  背景颜色  导入图片 平铺方式 背景是否固定 位置

直接用上面的例子：

  /* body{
         background-image: url("jpg/test1.jpg");
         background-position: center 40px;
         background-repeat: no-repeat;
         background-attachment: fixed;
     }*/  

  body{
       background: transparent url("jpg/test1.jpg") no-repeat fixed center 40px;
   }

效果一样：

在这里插入图片描述

背景定义大小

img标签的图片大小，可以强制其大小，那么背景图片自然也可以属性：background-size

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGgcGICv-1648904573161)(F:\文档\笔记\前端\CSS\5：背景属性设置.assets\image-20220402202451142.png)]

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        div{
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background :url("jpg/anhei.jpg") no-repeat;

            border: 1px solid black;
        }
        div:nth-of-type(1){

            background-size: 100px 100px;
        }
        div:nth-of-type(2){

            background-size: 100px;
        }
        div:nth-child(3){
            background-size: contain;
        }

    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

在这里插入图片描述

可以看出如果是一个数字参数或者百分比参数，就是定义的宽度，高度会等比例缩放。
如果两个数字或者百分比就会强制将高宽变成定义的高宽。
auto：是默认的参数。
cover：覆盖住元素高宽，必须全部覆盖如果其中的高或者宽不足，就会高宽等比例放大，只能放大道高宽都覆盖元素的范围。
contain：背景图片放在元素里面，和cover相反，只要高宽其中一个达到元素的高宽值后就不能再大或者缩小了。

背景颜色半透明

CSS3提供了背景颜色半透明效果如下：

background:rgba(a,b,c,d)

a,b,c：三个的数值0-255，也代表的是前面将的三个颜色之，这样可以搭配出不同的颜色。

d：范围是0-1，说白就是透明度的参数，如果是小数可以省略0比如：（0.5）可以写作（.5）。数字越大透明效果越差。

注意：背景半透明是指盒子半透明，盒子里面的内容不受影响，

举例子：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">

  .t1{
   width: 900px;
   height: 500px;
   background:  url("jpg/test1.jpg");

  }
  /* 这里为了演示效果用到了盒子模式 ，现在先看效果*/
  .t2{
   color: #d10000;
   position:fixed;
   bottom:500px;
   width: 900px;
   background: rgba(0,0,1,0.5) ;
  }

  .t3{
   color: #d10000;
   position:fixed;
   bottom:700px;
   width: 900px;
   background: rgba(0,0,1,1) ;
  }
 </style>
</head>
<body>
<div class="t1">
 <div class="t2">
  这是一个测试半透明
 </div>
 <div class="t3">
  这是一个测试不透明
 </div>

</div>
</body>
</html>

在这里插入图片描述

上面这个可以对有些元素的模糊处理是通过覆盖一层颜色，然后通过透明图来调整。下面介绍一种CSS3新特性直接可以让元素模糊的属性。

补充另一个模糊属性：opacity

这个是CSS3增的新属性。

格式：

opacity： 数字

解释：数字范围 0.0~1.0，数字越大越清晰。

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>

    <style>
        .test1{
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background :url("jpg/anhei.jpg") no-repeat;
            background-size: contain;
            border: 1px solid black;
            opacity: 0.5;
        }


        .test2{
            margin-top: 20px;
            width: 200px;
            border: 1px solid black;
            opacity: 0.5;
        }

    </style>
</head>
<body>
<div class="test1"></div>
<img class="test2" src="jpg/anhei.jpg">
</body>
</html>

在这里插入图片描述

小猪弟

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS基础之背景属性设置

CSS设置背景，不但包括背景的颜色，还包括背景图片等设置，还是老规矩演示比较靠谱。背景背景颜色背景颜色和文本颜色不同，一个是设置的是文本的颜色，一个是背景的颜色。使用的是backgrou-color属性选择器{ background-color: transparent | 颜色}transparent 背景颜色为透明。一般情况下背景颜色默认就是透明。颜色对应color的颜色标准即可。演示：<!DOCTYPE html><html lang="zh"&g
复制链接

扫一扫