HTML&CSS(08)---CSS(7)背景

 
  • 0 views

Unit Two: HTML&CSS(08)—CSS(7)背景

1. 背景<background>

  • 背景颜色<background-color>

  • 背景图片<background-image>

    • 如果背景图片小于元素，元素复制填满。
    • 如果背景图片大于元素，元素无法完全显示。
    • 如果背景图片和元素一样大，则会正常显示。

  • 背景重复方式<background-repeat>

    • :repeat默认值
    • :repeat-x沿x轴方向重复。
    • :repeat-y沿y轴方向重复。
    • :no-repeat背景图片不重复。

  • 背景图片位置<background-position>

    1. 方位词
      • 通过:top/right/bottom/left/center几个方位来设置背景位置。
      • 使用方位词必须同时指定两个值，如果只写一个，第二个默认为：center
    2. 偏移量
      • 水平方向的偏移量（x轴） - 垂直方向的偏移量（y轴）

  • 背景范围<background-clip>

    • :boder-box:默认值，背景会出现在边框。
    • :padding-box：背景不会出现在边框，
    • :content-box：背景只出现在内容区。

  • 背景图片原点<background-origin>

    • :boder-box:默认值，背景图片会出现在边框。
    • :padding-box：背景图片不会出现在边框，

  • :content-box：背景图片只出现在内容区。

  • 背景图片大小<background-size>

    • 可选值：
      • 第一个值表示宽度
      • 第二个值表示高度
    • 如果只写一个值，则第二个值默认是auto
    • :100%元素铺满一边。
    • :cover图片比例不变，将元素缩放铺满。
    • :contain图片比例不变，图片在元素中完整显示。

  • 背景图片跟随移动<background-attachment>

    • scroll默认值，背景图片会跟随元素移动。
    • fixed背景会固定在页面中，不会随元素移动。

  • 简写属性<background>

    • 大部分属性没有顺序要求。
    • <background-size>必须写在<background-position>的后边，并用/隔开。
      • <background:background-position/background-size>
    • <background-origin>必须在<background-clip>前边。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 10px solid rgba(207, 22, 22, 0.5);
            padding: 50px;
            width: 300px;
            height: 500px;
            /* background-color: tomato;
            background-image:url(./大黄猫/IMG_20200128_100008.jpg);
            background-repeat:no-repeat;
            background-origin:content-box ; 
            background-clip: padding-box;
            background-size:contain; */
            background: tan url(./大黄猫/IMG_20200128_100008.jpg) content-box padding-box center/100% no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2. 背景练习1–PS渐变背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 32px;
            width: 990px;
            /* ps图像裁剪背景，并保存为web所用格式，png */
            background-image: url(./大黄猫/verycd-bg.png);
            background-repeat: repeat-x;
            margin:0px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3. 背景练习2–超链接按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg{
            width: 300px;
            height: 100px;
            margin: 0px auto;
            background-image: url(./大黄猫/按钮/link.png);
            background-size: 100% 100%;
        }
        .bg:hover{
            width: 300px;
            height: 100px;
            margin: 0px auto;
            background-image: url(./大黄猫/按钮/hover.png);
        }
        .bg:active{
            background-image: url(./大黄猫/按钮/active.png);
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com"><div class="bg"></div></a>
</body>
</html>
  • 问题
    • 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载，用则加载，不用就不加载。
    • 上边练习，link图片会首先加载，而hover和active会在指定状态触发时才会加载。
  • 解决方案
    • （见4.雪碧图）可以间小图片统一保存到一个大图片中，这样图片会同时加载到网页中，然后通过调整background-position进行平移，然后避免闪烁问题。
    • 这个技术在网页中应用十分广泛。

4.雪碧图(!important)

CSS-sprite将网页图标全部放置在一个矢量图上，通过调整background-position位置，来设置图片位置，从而达到图片变换效果。

  • 使用步骤：
    1. 先确定要是用的图标。
    2. 测量图标的大小。
    3. 根据测量结果创建一个元素。
    4. 将雪碧图设置为元素背景图片。<background-image:url()>
    5. 设置偏移量，以显示正确的图片。<background-position>
  • 好处：一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验。
  • 劣势：只适用于背景图片。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            width: 93px;
            height: 29px;
            margin: 0px auto;
            background-image: url(./大黄猫/按钮/btn.png);
        }

        .bg:hover {
            /* width: 92px;
            height: 27px;
            margin: 0px auto; */
            background-image: url(./大黄猫/按钮/btn.png);
            background-position: -93px 0px;
        }

        .bg:active {
            background-image: url(./大黄猫/按钮/btn.png);
            background-position: -186px 0px;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">
        <div class="bg"></div>
    </a>
</body>

</html>

5. 渐变<background-image:linear/radial-gradient()>

  1. 线性渐变<background-image:linear-gradient()>

    • 颜色沿着一条直线发生变化。

    • 线性渐变是图片效果，需通过<background-image：linear-gradient()>来设置。

    • 方向：线性渐变开头，可以指定渐变方向：

      • 方向

        • to left
        • to right
        • to bottom
        • to top

      • 角度

        xxx deg

      • 圈

        turn

    • 多个颜色

      • 多个颜色默认情况下，平均分配。
      • 可手动指定颜色分别情况，数值代表颜色开始位置。
        • 可设置具体数值：:10px
        • 百分比：:red 20%, yellow 40%

    • <background-image:reapting-linear-gradient()>平铺线性渐变

    <!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg{
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-image: linear-gradient(0.3turn, #92fe9d 40%,#00c9ff 80%);
        }
        .bg2{
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-image:  linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
        }
        .bg3{
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-image: repeating-linear-gradient(0.3turn, #92fe9d 20%,#00c9ff 40%, #a86aa4 50%);
        }
    </style>
</head>
   
<body>
        <div class="bg"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
</body>
   
</html>

  2. 径向渐变（放射渐变）<background-image:radial-gradient()>

默认情况下，径向渐变形状根据元素的形状来计算。

  • 正方形-》圆形

  • 长方形-》椭圆形

  • 指定径向渐变大小：
  • circle正圆
    • ellipse椭圆
    • close-side到最近的边
    • farthest-side到最远的边
    • close-corner近角
    • farthest-corner圆角
    • 数值
  • 指定径向渐变位置：
  • 数值:at 100px 100px
    • 方位:at top left
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            width: 300px;
            height: 300px;
            /* border-radius: 150px; */
            background-image: radial-gradient(ellipse at 10px 10px, #92fe9d, #00c9ff);
        }

        .bg2 {
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-image: radial-gradient(farthest-side at 10px 10px, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
        }

        .bg3 {
            width: 300px;
            height: 300px;
            /* border-radius: 150px; */
            background-image: repeating-radial-gradient(farthest-corner at 50px 50px, #92fe9d 10%, #00c9ff 20%, #a86aa4 30%);
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>

</html>

6. 电影卡片练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Unit 2 CSS/205 定位/reset style/normalize.css">
    <link rel="stylesheet"
        href="/Unit 2 CSS/206 字体/fontawesome-free-5.14.0-web/fontawesome-free-5.14.0-web/css/all.css">
    <style>
        .body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .card {
            width: 240px;
            /* height: 345px; */
            margin: 10px auto;
            border: solid 1px #dad9d9;
            box-shadow: 1px 1px 1px #dad9d9;
            /* box-shadow: -1px 1px 1px #dad9d9; */
            border-radius: 3px;
        }

        img {
            width: 100%;
            /* 将图片和边框重叠。 */
            vertical-align: bottom;
            /* border: 1px salmon solid; */
        }

        .film {
            /* width: 100%; */
            height: 108px;
            margin: 14px 18px;
            color: #acaaaa;
            font-size: 13px;
        }

        .animation_film {
            font-size: 18px;
            margin-left: -2px;
            margin-bottom: 15px;
            color: #717171;
        }

        i {
            margin-right: 7px;

        }

        .animations {
            margin-bottom: 14px;
        }

        .animations_text {
            display: inline-block;
        }

        .lorem {
            font-size: 12px;
            line-height: 18px;
        }

        .rate {
            margin-top: 25px;
            border-top: 1px solid #e9e9e9;
        }

        .icon {
            /* width: 190px; */
            height: 21px;
            /* margin-left: 17px; */
            margin-right: 34px;
            margin-top: 16px;
            margin-bottom: 14px;
            padding-left: 24px;
            color: #dddddd;
        }

        .star {
            float: left;
            font-size: 16px;
        }

        .facebook {
            float: right;
            font-size: 24px;
            position: relative;
            top: -4 px;
        }
    </style>

</head>

<body>
    <div class="card">
        <div class="pic"><img src="./大黄猫/elsa.png" alt="" class="elsa"></div>
        <div class="film">
            <div class="animation_film">Animation films</div>
            <div class="animations">
                <i class="fas fa-map-marker-alt"></i>
                <div class="animations_text">Animations</div>
            </div>
            <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit eum cumque quo! </div>
        </div>
        <div class="rate">
            <ul class="icon">
                <li class="star fas fa-star" style="color: #b9cb41;"></li>
                <li class="star fas fa-star" style="color: #b9cb41;"></li>
                <li class="star fas fa-star"></li>
                <li class="star fas fa-star"></li>
                <li class="facebook fab fa-facebook"></li>
            </ul>
        </div>
    </div>
</body>

</html>