css中设置background属性

时间 2019-11-21

原文原文链接

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它能够分解成以下几个设置项：css

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定仍是随着页面滚动条滚动

实际应用中，咱们能够用background属性将上面全部的设置项放在一块儿，并且也建议这么作，这样作性能更高，并且兼容性更好，好比：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是能够的，它会使用默认值。html

举例：
下面这些例子使用下面这张图片作为背景图：
性能

一、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。url

二、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其余部分显示背景颜色“cyan”。3d

三、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其余部分显示背景颜色“cyan”。code

四、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其余部分显示背景颜色“cyan”。htm

五、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其余部分显示背景颜色“cyan”。blog

六、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其余部分显示背景颜色“cyan”。图片

相关代码：it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>
</head>
<body>
    <div class="backshow bg1"></div>
    <div class="backshow bg2"></div>
    <div class="backshow bg3"></div>
    <div class="backshow bg4"></div>
    <div class="backshow bg5"></div>
    <div class="backshow bg6"></div>
</body>
</html>

例子说明：
代码中使用到的背景图片，能够直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，而且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就能够把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还能够设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种状况，咱们能够用数值定位，截取大图片的某一块作为盒子的背景。

好比说，咱们想把下边的盒子用右边的图片做为背景，而且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片做为左边那个比它尺寸小的盒子的背景，若是不设置background-position，默认背景图的左上角会和盒子的左上角对齐，若是设置，能够用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于本身的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于本身的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>

</html>

1. CSS background 属性
2. css background 属性
3. CSS background属性
4. css的background属性
5. CSS background-clip 属性
6. CSS background-clip属性
7. background-image属性的设置
8. html中background-image属性的设置
9. CSS 属性篇(六)：background-size属性
10. CSS 背景位置 background-position属性
更多相关文章...
• MySQL AS：设置别名 - MySQL教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• IntelliJ IDEA代码格式化设置
• JDK13 GA发布：5大特性解读