css3背景

来源：互联网发布：mac 中断 ping 编辑：程序博客网时间：2024/05/10 19:26

3 CSS3背景

· background-image

· background-size

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        body
        {
            background:url(img/smiley.jpg);
            background-size:80px 60px;
            background-repeat:no-repeat;
            padding-top:40px;
        }
    </style>
</head>
<body>
<p>
    Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="img/smiley.jpg" alt="Flowers" width="224" height="162"></p>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div{
            background: url("img/dog2.jpg");
            background-repeat: no-repeat;
            /*background-size: 100px 100px;*//*给一个值第二个为auto*/
            /*background-size: 50% 100%;*//*百分比是相对包含元素的尺寸*/
            /*background-size: contain;*//*缩小或者适应放大图片的大小维持像素长高较大*/
            background-size: cover;/*元素多少填补多少以较小缩放*/
        }
    </style>
</head>
<body>
   <div class="div">
       <p>它是狗</p>
       <p>它是狗</p>
       <p>它是狗</p>
       <p>它是狗</p>

   </div>
</body>
</html>

background-size: contain 缩小图片以适合元素（维持像素长宽比）
background-size: cover 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"
background-size: 50% 100% 缩小图片至指定的大小，百分比是相对包含元素的尺寸

· background-origin 原点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            padding: 25px;
            border: 5px dotted black;
            background-image: url("img/timg.jpg");
            background-repeat: no-repeat;
            background-position: left;
        }
        .div1{
            background-origin: padding-box;/*默认值*/
        }
        .div2{
            background-origin: content-box;/*默认值*/
        }
        .div3{
            background-origin:border-box;/*默认值*/
        }
    </style>
</head>
<body>
<div class="div1" >
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
</div>
<div class="div2" >
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
</div>
<div class="div3" >
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
    Stop trying to find a rewind. It's life, not a movie
</div>
</body>
</html>

· 以前的背景图大小由图像至的实际大小决定

· 可以指定背景图，就可以重新指定背景图的大小，像素或者百分比！

· background-clip 修剪

阅读全文

0 0