40 CSS的背景

于 2021-07-09 15:02:53 发布
阅读量100 收藏
点赞数
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_sunny123/article/details/118607144
版权

一.背景颜色

在这里插入图片描述

代码：

<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* background-color: transparent;  透明的，清澈的 */
            background-color: pink;
        }
    </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>Document</title>
    <style>
        div {
            width: 800px;
            height: 500px;
            /* 不要落下 url() */
            /* background-image: url(地址); */
            background-image: url(images/logo.png);
        }
    </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>Document</title>
    <style>
        div {
            width: 800px;
            height: 500px;
            background-color: pink;
            /* 不要落下 url() */
            /* background-image: url(地址); */
            background-image: url(images/logo.png);
            /*1  背景图不平铺 */
            /* background-repeat: no-repeat; */
            /* 2  默认情况下都是平铺的 */
            /* background-repeat: repeat; */
            /* 3  沿着X轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4  沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */
        }
    </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>20</title>
    <style>
        div {
            width: 800px;
            height: 600px;
            background-color: pink;
            background-image: url(images/logo.png);
            /*1  背景图不平铺 */
            background-repeat: no-repeat;
            /* background-position:  方位名词 */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词 right center和 center right效果是等价的，和顺序无关 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐的，第二个参数省略y轴，是垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是top, Y轴顶部对齐，第二个参数省略X轴，是水平居中显示的 */
            background-position: top;


        }
    </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>21-背景方位名词的应用</title>
    <style>
        h3 {
            width: 118px;
            height: 41px;
            /* background-color: pink; */

            font-size: 14px;
            font-weight: 400;
            line-height: 41px;
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</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>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px, 50px; x轴一定是20；y轴一定是50； */
            /* background-position: 20px, 50px; */
            /* background-position: 50px, 20px; */
            /* background-position: 20px; */
            background-position: 20px center;

        }
    </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>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center 41px;

        }
    </style>

<body>

</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>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            color: #fff;
            font-size: 20px;
            /* 把背景图片固定住 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
</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>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
             /* 把背景图片固定住 */
            /* background-attachment: fixed; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;

        }
    </style>
</head>

<body>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
    <p>天王盖地虎，pink老师两米五</p>
</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>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            /* background: rgba(0, 0, 0, 0.3); */
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>隐形的翅膀</div>
</body>

</html>

结果

在这里插入图片描述

总结

在这里插入图片描述

hello_sunny123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义Section:修改UITableView的Section的背景和字体
08-04 9018
自定义Section:修改UITableView的Section的背景和字体 第一次尝试修改UITableView的Section的背景和字体，头疼好一阵，终于找到了方法： 如同自定义Cell一样，使用UITableView的函数，可以自定义Section： - (
CSS背景
MOOG007的博客
08-17 714
通过CSS背景属性，可以给页面元素添加背景样式 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 背景颜色 background-color属性定义了元素的背景颜色 一般情况下 background-color的默认值是transparent（透明），我们可以手动指定背景颜色为透明 CSS背景 超大背景图片将图片中核心内容显示在盒子中间，两侧看不见了，但是屏幕变大后会看见两侧的部分 背景图片的应用：小的装饰图片、超大背景图片 视差滚动 .
html section 添加背景图片
bubbleTg的博客
09-20 6692
直接在css 样式里设置就可以了。   section.hero {     background: url(../images/welcome02.jpg) no-repeat;     background-size: 100%;          //设置背景大小 }
ssm开发经验 动态设置div/section标签背景图片
weixin_39452731的博客
07-15 1601
情景时酱紫的： 图片是一个url，在页面加载完成之后根据后台给的url动态设置标签的背景图片，效果就像这样子，后边这一大堆企鹅和前边的企鹅用的是一样的url，但是前边的是img，后边的是div 解决方案，其实也很简单，img的是用过设置它的src属性来完成的，div是设置background-image来完成的，就像这样子 $("#home").css("background-ima...
table的td设置背景图片
热门推荐
wtt561111的专栏
01-13 2万+
多种方法说明：如何为table的td添加一个图片作为背景
CSS 背景全攻略
09-25
这篇文章将深入探讨CSS背景的各个方面，包括基本属性、技巧以及CSS3的新特性。 首先，CSS2中的背景属性包括五个主要部分： 1. **背景色 (background-color)**：此属性允许设置元素的背景颜色。可以通过颜色名称、...
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
css 背景样式属性说明
09-25
CSS 背景样式属性是控制网页背景样式的基本属性，它包括背景颜色、背景图片、背景重复、背景固定、背景定位等多个方面。下面对这些属性进行详细的解释： 1. 背景颜色（background-color） 背景颜色是网页背景的...
HTML+CSS实现漂亮的背景实例
09-25
在这个实例中，我们将探讨如何使用这两种技术来实现一个美观的背景效果，使得网页背景与大海的图像完美融合...对于想要进一步提升自己在CSS背景设计方面能力的开发者来说，深入研究这些属性的用法和交互是非常有益的。
CSS 背景
12-13
CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了...
CSS Filter背景透明提示
09-05
标题中的“CSS Filter背景透明提示”是指利用CSS的Filter滤镜属性来实现一种特殊效果，即当鼠标悬停在某个元素上时，该元素会显示一个半透明的提示层。这个提示层通常用于提供额外的信息或者增强用户体验。下面将...
css 设置全屏背景图片
09-25
在HTML中，当我们设置背景图，只能采用是否重叠、居中、重叠方向这几个选项
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
CSS3实现背景图片视觉差效果
lijianfengxiaoli的博客
08-22 3509
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; section { height: 100vh; }
CSS - 插入图片img和背景图片
anchenhe9360的博客
05-08 5484
1. img插入图片，用的最多，比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */ margin...
css背景上下左右详细参数
09-11
css背景上下左右详细参数，最详细的代码介绍。.no-repeat left top (靠左上，=(0px，0px),=只有no-repeat
css背景镂空
最新发布
06-02
要实现CSS背景镂空的效果，可以使用CSS3中的属性：`background-clip`和`background-color`，具体实现方法如下： 1. 首先在HTML中创建一个元素，比如一个`<div>`元素。 2. 在CSS中添加以下代码： ``` div { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值