CSS3背景

最新推荐文章于 2024-01-10 12:25:01 发布

小崔崔的博客

最新推荐文章于 2024-01-10 12:25:01 发布

阅读量362

点赞数

分类专栏： css3

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_39430589/article/details/78174876

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

（1）

<style>
        body{
            /*background-image: url(../img2/timg.jpg);
            background-repeat:no-repeat;
            background-color: #00BFFF;
            background-position: center;
            background-attachment: scroll;*/
            background: url(../img2/timg.jpg) no-repeat skyblue center fixed;
        }

    </style>
</head>
<body>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>
<p>滑动鼠标</p>

</body>

（2）

  <style>
        .div{
            padding: 35px;
            background:yellow ;
            border: 5px dotted black;
            background-clip: border-box;
            /* background-clip: padding-box;
             /*background-clip: content-box;*/
        }
    </style>
</head>
<body>
<div class="div">华点软件学院</div>

background-clip: border-box;/*默认值*/背景被裁剪到边框盒
background-clip: padding-box;背景被裁剪到内边距离
background-clip: content-box;背景被裁剪到内容框

（3）

      div{
            padding: 25px;
            background: url("../img2/timg.jpg") no-repeat left;
            border: 5px dotted black;
        }
        .div1 {
            background-origin:padding-box;/*默认值*/
        }
        .div2 {
            background-origin:content-box;
        }
        .div3 {
            background-origin: border-box;
        }

    </style>
</head>
<body>
<div class="div1">
    软件学院
</div>
<br/>
<div class="div2">
    软件学院
</div>
<div class="div3">
    软件学院
</div>
<br/>

3.背景图片大小

   <style>
        body{
            background: url("../img2/dog2.jpg") no-repeat;
            background-size:80px 60px ;
            padding-top: 40px;
        }
    </style>
</head>
<body>
<p>原始图片<img src="../img2/dog2.jpg" alt="dog" width="224" height="150"/></p>

css3以前：背景图片大小有图像的实际大小决定

css3中可以指定背景图片，可以重新指定图片大小，像素或者百分比

<style>
    .div1{
        background: url("../img2/dog2.jpg") no-repeat;
        background-size:100px 100px ;/*给一个值，第二个值为auto*/
        background-size:50% 100%;/*百分比包含相对尺寸*/
        background-size: contain;/*缩小图片以适合元素（维持像素长宽比）*/
        background-size: cover;/*扩展元素以填补元素（维持像素长宽比）*/
    }
</style>
</body>
<div class="div1">
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
    <p>狗狗狗</p>
</div>

总结新属性

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

小崔崔的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。