常用的CSS背景属性

最新推荐文章于 2024-04-08 15:42:29 发布

小栗子的普

最新推荐文章于 2024-04-08 15:42:29 发布

阅读量417

点赞数

分类专栏： CSS 文章标签： CSS 背景

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84674054

版权

CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.背景颜色：background-color

三种方式

-直接写出颜色的英文单词，例如red,blue等
-二进制例如#ffffff #cf28da等
-rgba(255,255,255,0.4)
第一个参数代表红色
第二个参数代表绿色
第三个参数代表蓝色
第四个参数代表背景的透明度

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    </style>
</head>
<body>
<div class="div"></div>

</body>
</html>

结果如下
在这里插入图片描述

2.背景图片background-image

例：在一个div中插入背景图片
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        width: 200px;
        height: 200px;
        background-image: url("wenjing.jpg");
    }
    </style>
</head>
<body>
<div class="div"></div>

</body>
</html>

结果如下
在这里插入图片描述

被插入的图片尺寸过大，所以只显示如上图的效果，为了解决这一问题，需给背景图片加上背景尺寸

3.背景尺寸background-size

-直接给像素值例 background-size:100px 100px;(左右，上下)
-给百分比例 background-size:100% 100%（100%即跟div一样的宽高）
-cover:铺满整个屏幕，不拉伸，按比例缩放
-contain:按比例缩放，让容器恰好容纳背景图
例：给上个例子的背景图加个尺寸
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        border: 1px solid red;
        width: 200px;
        height: 200px;
        background-image: url("wenjing.jpg");
        background-size: 100% 100%;
    }
    </style>
</head>
<body>
<div class="div"></div>

</body>
</html>

结果如下
在这里插入图片描述

4.背景图片重复方式：background-repeat

-repeat:整个容器都铺满
-repeatx/y:水平/竖直方向铺满
-no-repeat:不平铺

例给一个div添加背景图片，使其垂直方向平铺
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        border: 1px solid red;
        width: 1000px;
        height: 400px;
        background-image: url("dianyundou.jpg");

        background-repeat:repeat-x;
    }
    </style>
</head>
<body>
<div class="div"></div>

</body>
</html>

结果如下图
在这里插入图片描述

5.位置坐标，偏移量background-position(x,y);

x代表向左平移的距离
y代表向上平移的距离
例：一张图片如下图所示，请把彩色微博的图标（只要微博）插入到div中
示例图片：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        border: 1px solid red;
        width: 25px;
        height: 20px;
        background-image: url("q.png");
        background-size: 174px 40px;
        background-repeat: no-repeat;
        background-position: -20px -20px;

    }
    </style>
</head>
<body>
<div class="div"></div>

</body>
</html>

没有加background-position结果如下
在这里插入图片描述

加入background-position之后结果如下
在这里插入图片描述

小栗子的普

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的CSS背景属性

1.背景颜色：background-color三种方式-直接写出颜色的英文单词，例如red,blue等-二进制例如#ffffff #cf28da等-rgba(255,255,255,0.4)第一个参数代表红色第二个参数代表绿色第三个参数代表蓝色第四个参数代表背景的透明度例：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;he...
复制链接

扫一扫