css中background常用属性详解

最新推荐文章于 2023-05-22 13:47:54 发布

峨M峰

最新推荐文章于 2023-05-22 13:47:54 发布

阅读量498

点赞数 1

分类专栏： css小技巧文章标签： html5 css css3 前端

本文链接：https://blog.csdn.net/weixin_46719229/article/details/120098785

版权

css小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

background常用属性详解

background-color

为元素设置背景颜色

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

background-color: #ffff00;
background-color: yellow;
background-color: rgb(255,255,0);
background-color: transparent;

展示效果

在这里插入图片描述

background-image

为元素设置背景图像

值	描述
url(‘URL’)	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

background-image:url(img/banner04.jpg) ;

展示效果

在这里插入图片描述

background-repeat

设置是否及如何重复背景图像；默认背景图像在水平和垂直方向上重复。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

<style>
    .box{
        float: left;
        width: 200px;
        height: 100px;
        margin-right:20px;
        background-image:url(img/banner04.jpg);
        background-size: 100px 50px;
        border: 1px solid red;    
    }
    .box1{
        background-repeat: no-repeat;				
    }
    .box2{
        background-repeat: repeat-x;
    }
    .box3{
        background-repeat: repeat-y;
    }
    .box4{
        background-repeat: repeat;
    }
</style>
<body>
    <div class="main">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
    </div>

</body>

展示效果

在这里插入图片描述

background-position

设置背景图像的起始位置

值	描述
top left \|top center\|top right\|center left \|center center\|center right\|bottom left \|bottom center\| bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

<style>
    .box{
        float: left;
        width: 200px;
        height: 100px;
        margin-right:20px;
        background-image:url(img/banner04.jpg);
        background-size: 100px 50px;
        background-repeat: no-repeat;	
        border: 1px solid red;         
}
    .box1{
        /* background-position: center center; */
        background-position: center; 
    }
    .box2{
        /* background-position: 50% 50%; */
        background-position: 50% ;
    }
    .box3{
    	background-position: 50px 25px;
    }
    .box4{
    	background-position: 50% 25px;
    }
</style>
<body>
    <div class="main">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
    </div>
</body>

展示效果

在这里插入图片描述

background-size

规定背景图像的尺寸

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

<style>
    .box{
        float: left;
        width: 200px;
        height: 100px;
        margin-right:20px;
        background-image:url(img/banner04.jpg);
        background-repeat: no-repeat;	
        border: 1px solid red;
    }
    .box1{
        /* background-size: 100px 50px; */
        background-size: 50% 50%;
    }
    .box2{
        /* background-size: 100px; */
        background-size: 50%;
    }
    .box3{
        background-size: cover;
    }
    .box4{
        background-size: contain;
    }

</style>
</head>
<body>
    <div class="main">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
    </div>
</body>

展示效果

在这里插入图片描述

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-attachment: fixed;
background-attachment: scroll;

效果

在这里插入图片描述

峨M峰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中background常用属性详解

background常用属性详解background-color为元素设置背景颜色值描述color_name规定颜色值为颜色名称的背景颜色（比如 red）。hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。transparent默认。背景颜色为透明。inherit规定应该从父元素继承 background-color 属性的设
复制链接

扫一扫