CSS背景样式：background属性

2021年12月23日技术服务网页设计 css3370

背景样式主要包括背景颜色和背景图像。

1.background-color 设置元素的背景颜色。
background-color：颜色/transparent
说明：transparent是全透明
颜色值（颜色名/RGB/十六进制）
背景区包括内容、内边距（padding）和边框（border）、不包含外边距（margin）

2.background-image 设置元素的背景图片。
background-image：url(图片地址)/none
说明：url地址可以是相对地址也可以是绝对地址
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
当即设置了背景图片又设置了背景颜色时，背景图片会覆盖背景颜色

3.background-position 设置背景图片的起始位置

A. 这个属性只能应用于块元素和替换元素，替换元素包括img、input、textarea、select和object。
B. 该属性值可以设置为关键字，也可以设置为两个像素值（”20px 30px“），设置为关键字时表示背景图像相对于元素的左上角的距离（分别是水平距离和垂直距离）。
C. 该属性值可取的关键字为：
top left：左上（表示图像位于元素的左上角，下面的类似）
top center：靠上居中
top right：右上
left center：靠左居中
center center：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下

4.background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-attachment：scroll/fixed
scroll：默认值，随着图片的滚动而滚动
fixed：当页面的其余部分滚动时，背景图片不会移动

5.background-repeat 设置背景图像是否重复及如何重复
该属性可以取如下值：
        no-repeat：不平铺
        repeat：在水平方向（x轴）和垂直方向（y轴）同时平铺，默认值
        repeat-x：在水平方向（x轴）平铺
        repeat-y：在垂直方向（y轴）平铺

6.background 简写属性，作用是将背景属性设置在一个声明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
说明：各值之间用空格分割，不分先后顺序

示例代码

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        body{
            height: 1000px;
            /*背景颜色   默认为透明  transparent*/
            background-color: red;
            /*background-color: #ff0000;*/
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,.5);*/
            
            /*背景图片 默认水平垂直平铺*/
            /*background-image: url("images/pic2.jpeg");*/

            /*背景图片平铺*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/

            /*背景图片的大小*/
            /*background-size:1000px ;*/
            /*background-size: 100% 100%;*/

            /*背景图片固定*/
            /*background-attachment:fixed ;*/

            background:red  url("images/pic2.jpeg") no-repeat fixed ;
            background-size: 100% 100%;
        }
        .box{
            width: 800px;
            height: 600px;
            /*background-color: rgba(255,255,255,.5);
            background-image: url("images/pic1.jpg");
            background-repeat: no-repeat;*/
            /*background-size: contain;*/

            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;


            /*背景图片定位*/
            /*background-position: x y;*/
            /*当只有水平方向，垂直方向默认居中*/
            /*background-position: 30px 30px;*/
            /*background-position: 30px;*/
            /*background-position: right bottom;*/
            /*background-position: center;*/


            /*简写为*/
            /*background：颜色 图片 平铺 大小  定位 固定;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上一篇: CSS3几句代码实现网站变黑白色下一篇: 网站SEO优化的原理与优势