首页 > 代码库 > CSS学习（九）-CSS背景

CSS学习（九）-CSS背景

2024-11-20 02:58:39   203人阅读

一、理论：
1.background-break 
a.bounding-box 背景图像在整个内联元素中进行平铺
b.each-box 背景图像在行内中进行平铺
c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺
以上仅在firefox下可用
2.css多背景
a.background-image 设置元素背景图片民，可用相对地址或绝对地址索引背景图像
b.background-repeat 设置元素背景图像的平铺方式 默认repeat
c.background-size 设置元素背景图像的尺寸大小 默认auto
d.background-attachment 设置元素的背景图片是否固定 默认scroll
e.background-clip 控制元素背景图像显示区域大小,默认border-box
f.background-color 设置元素背景颜色
g.多个属性中间必须用","分开
h.最先声明的背景图片将会居于最上层，最后指定的图片放于最底层

二、实践：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            background: #000 url(images/2-11-test.jpg) center center fixed no-repeat;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        @media only all and (max-width:1024px) and (max-height: 768px){
            body{
                -moz-background-size: 1024px 768px;
                -webkit-background-size: 1024px 768px;
                -o-background-size: 1024px 768px;
                background-size: 1024px 768px;
            }
        }
        @media only all and (max-width:640px) and (max-height: 480px){
            body{
                -moz-background-size: 640px 480px;
                -webkit-background-size: 640px 480px;
                -o-background-size: 640px 480px;
                background-size: 640px 480px;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div class="div1" ></div>
    <div class="div2" ></div>
    <div class="div3" ></div>
    <div class="div4" ></div>
</body>
</html>
2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .demo{
            width: 500px;
            height: 300px;
            border:20px solid rgba(104,105,168,0.5);
            border-radius: 10px;
            padding: 80px 60px;
            color:#123589;
            font-size: 25px;
            line-height: 1.5;
            text-align: center;
        }
        .multipleBg{
            background: url("images/round-box1.jpg") no-repeat left top,
            url("images/round-box-2.jpg") no-repeat right top,
            url("images/border-radius.jpg") no-repeat left bottom,
            url("images/tabs-image.jpg") no-repeat right bottom,
            url("images/border.jpg") no-repeat right bottom;
            -webkit-background-origin: border-box,border-box,border-box,border-box,padding-box;
            -moz-background-origin: border-box,border-box,border-box,border-box,padding-box;
            -o-background-origin: border-box,border-box,border-box,border-box,padding-box;
            background-origin: border-box,border-box,border-box,border-box,padding-box;
            -moz-background-clip: border-box;
            -webkit-background-clip: border-box;
            -o-background-clip:border-box;
            background-clip: border-box;
        }
    </style>
</head>
<body>
    <div class="demo multipleBg">用五张背景图片做出这种效果</div>
</body>
</html>



CSS学习（九）-CSS背景


联系
我们