02-CSS基础与进阶-day3_2018-08-29-21-30-56

最新推荐文章于 2019-06-23 23:08:00 发布

weixin_34272308

最新推荐文章于 2019-06-23 23:08:00 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HiJackykun/p/11042653.html

博客包含05背景透明度、06背景缩放、07多背景等HTML相关示例内容，转载自https://www.cnblogs.com/HiJackykun/p/11042653.html 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

05背景透明度.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #000 url(img/king.jpg) no-repeat top center;
        }

        div {
            height: 400px;
            /* background: rgba(0,0,0,0.3); */
            background-color: rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

06背景缩放.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            width: 100px;
            height: 140px;
            background: hotpink url(img/l.jpg) no-repeat;
            /* 设置背景图片大小 background-size*/
           /*  background-size: 100px; */ /*我们尽量改一个值 防止缩放失真扭曲*/ 
            /* background-size: 100%;  */ /* 268:418=100%*400:?*/
            /* 会自动调整缩放比例 保证图片始终填充满背景区域，假如有
              溢出部分则被隐藏 cover平时用的最多
            */ 
             /* background-size: cover; */
             background-size: contain;
             /*会自动调整缩放比例 保证图片始终完整显示在背景区域
               图片进行等比例缩放，假如图片高度或者宽度有一个和盒子
               一样大 就不在缩放 这样好处图片完整，不会缺失一部分
             */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

07多背景.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         div {
             width: 500px;
             height: 500px;
             background: url(img/3.jpg) no-repeat left top,
              url(img/l.jpg) no-repeat left top hotpink;
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>