css背景

2个月前 (08-04) 302次浏览 已收录 1个评论

背景平铺

语法:

背景不平铺,默认是平铺的
background-repeat: no-repeat;
沿x轴平铺
background-repeat: repea-x;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css背景平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/pic.jpeg);
            background-repeat: repeat-x;
        }
    </style>
</head>

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

</html>
结果演示

背景图片位置

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css背景图片位置</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            /*  文字垂直居中对齐*/
            line-height: 40px;
            /*背景图片水平靠左对齐 垂直居中对齐*/
            background-position: left center;
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            text-indent: 1em;
        }
    </style>
</head>

<body>
    <h3>测试</h3>
</body>

</html>
结果演示
超大背景图片一般放在body中

方位属性值

  • center:背景图像横向和纵向居中。
  • left:背景图像在横向上填充从左边开始。
  • right:背景图像在横向上填充从右边开始。
  • top:背景图像在纵向上填充从顶部开始。
  • bottom:背景图像在纵向上填充从底部开始。

精确单位

语法:

background-position:x像素 y像素;
  • 如果只指定一个数值,那该数值一定是x坐标,另一个默认为垂直居中。
  • 如果指定的两个值是精确单位和方位名词混合使用,那第一个也是x坐标的意思,第二个也是y坐标的意思。

背景附着

语法:

background-attachment:scroll
  • scroll 背景图像是随对象内容滚动
  • fixed 背景图像固定
结果演示

背景属性复合写法

以上所写代码可以用下面的代码复合起来。

background: black url(images/bg.jpg) no-repeat fixed center top;

背景色半透明

语法:

background:rgba{0,0,0,0.3};
  • 最后一个参数是设置透明度,取值范围在0-1之间。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景色半透明</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background: rgba(163, 55, 55, 0.5);
        }
    </style>
</head>

<body>
    <div>测试</div>
</body>

</html>
结果演示

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏案例</title>
    <style>
        .cla a {
            display: inline-block;
            width: 120px;
            height: 48px;
            color: aliceblue;
            text-decoration: none;
            line-height: 48px;
            text-align: center;
        }

        .cla .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .cla .bg1:hover {
            background: url(images/bg2.png)
        }

        .cla .bg3 {
            background: url(images/bg4.png) no-repeat;
        }

        .cla .bg3:hover {
            background: url(images/bg5.png)
        }

        .cla .bg4 {
            background: url(images/bg11.png) no-repeat;
        }

        .cla .bg4:hover {
            background: url(images/bg22.png)
        }

        .cla .bg5 {
            background: url(images/bg22.png) no-repeat;
        }

        .cla .bg5:hover {
            background: url(images/bg4.png)
        }
    </style>
</head>

<body>
    <div class="cla">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>


</body>

</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css背景
喜欢 (2)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 补:background-size:cover 保证尽量全的显示图片
    厚积薄发2021-09-05 11:24