CSS基础之 背景属性设置

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值