背景——CSS

最新推荐文章于 2024-11-10 20:48:21 发布
最新推荐文章于 2024-11-10 20:48:21 发布
阅读量512 收藏
点赞数
分类专栏： HTML+CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124167255
版权

文章目录

背景颜色：background-color

设置背景颜色

        .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
        }

在这里插入图片描述

背景图片：background-image

        .box1{
            width: 500px;
            height: 500px;
            background-image: url("IMG/7.png");
        }

在这里插入图片描述

背景图片和容器的大小关系

  • 如果背景的图片小于元素,则背景图片会自动在元素中平铺，将元素填满
  • 如果背景的图片大于元素,将会一个部分背景无法完全显示
  • 如果背景图片和元素一样大,则会直接正常显示

background-color 和 background-image 可以一起使用，这样背景颜色将会成为图片的背景色

        .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url("IMG/7.png");
        }

在这里插入图片描述

background-repeat

background-repeat用来设置背景的重复方式
可选值:

  • repeat默认值,背景会沿着x轴y轴双方向重复
    在这里插入图片描述

  • repeat-x沿着x轴方向重复
    在这里插入图片描述

  • repeat-y沿着y轴方向重复
    在这里插入图片描述

  • no-repeat背景图片不重复
    在这里插入图片描述

background-position

background-position用来设置背景图片的位置

设置方式一:

通过top left right bottom center几个表示方位的词来设置图片的位置。
九宫格位置：
在这里插入图片描述

       .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url("IMG/7.png");
            background-repeat: no-repeat;
            background-position:center center;
        }

在这里插入图片描述
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center。

设置方式二

通过偏移量来指定背景图片的位置:
水平方向偏移量，垂直方向偏移量
eg：

        .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url("IMG/7.png");
            background-repeat: no-repeat;
            background-position:-100px 300px;
        }

输出：
在这里插入图片描述

background-clip

设置背景的范围
background-clip
可选值:

  • border-box默认值,背景会出现在边框的下边
      .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url("IMG/7.png");
            background-repeat: no-repeat;
            border: 10px red double;
            background-clip: border-box;
        }

在这里插入图片描述

  • padding-box背景不会出现在边框,只出现在内容区和内边距
    在这里插入图片描述

  • content-box背景只会出现在内容区

        .box1{
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url("IMG/7.png");
            background-repeat: no-repeat;
            border: 10px red double;
            padding: 20px;
            background-clip:content-box;
        }

在这里插入图片描述

background-origin

background-origin背景图片的偏移量计算的原点

  • padding-box默认值,background-position从内边距处开始计算
    在这里插入图片描述

  • content-box背景图片的偏移量从内容区处计算
    在这里插入图片描述

  • border-box背景图片的变量从边框处开始计算
    在这里插入图片描述

background-size

background-size设置背景图片的大小

  • 第一个值表示宽度，第二个值表示高度
  • 如果只写一个，则第二个值默认是auto
  • 如果只写一个参数默认写的是宽度
    eg：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-image: url("IMG/5.jpg");
            background-repeat: no-repeat;
            border: 10px red double;
            background-position:0 0;
            background-size: 100%;
            
        }
    </style>
</head>
<body>
    <div class="box1">

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

在这里插入图片描述

  • cover图片的比例不变，将元素铺满
    在这里插入图片描述

  • contain图片比例不变,将图片在元素中完整显示
    在这里插入图片描述

background-attachment

background-attachment背景图片是否跟随元素移动
可选值:

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

背景元素的简写

backgound背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：

  • background-size必须写在background-position的后边，并且使用/隔开
    background-position/background-size
  • background-origin background-clip两个样式，orgin要在clip的前面

雪碧图

图片的加载问题

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的,用则加载,不用则不加载。、这就导致如果两个图片需要交替出现，由于两个图片的加载顺序不同，导致图片切换的时候会有白色空隙页面出现。

解决——雪碧图

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示移动图片，通过移动到图片的不同位置达到图片的切换效果。
这样图片会同时加载到网页中（因为实际上就只有一张图片）就可以有效的避兔出现闪烁的问题。
这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

  • 原理图示
    在这里插入图片描述

  • 雪碧图的使用步骤;
    1.先确定要使用的图标
    2.测量图标的大小
    3.根据测量结果创建一个元素
    4.将雪碧图设置为元素的背景图片
    5.设置一个偏移量以显示正确的图片

  • 雪碧图的特点:
    一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 110px;
            height: 150px;
        }
        a:link{
            display: block;
            width: 100%;
            height: 100%;
            background-image: url("IMG/8.png");
            background-position: 0px 0px;
        }
        a:hover{
            display: block;
            width: 100%;
            height: 100%;
            background-image: url("IMG/8.png");
            background-position: -110px -150px;
        }
        a:active{
            display: block;
            width: 100%;
            height: 100%;
            background-image: url("IMG/8.png");
            background-position: -220px -150px;
        }
    </style>
</head> 
<body>
    <div>
        <a href="javascript:;"></a>
    </div>
    
</body>
</html>

正常：
在这里插入图片描述
悬浮：
在这里插入图片描述
点击：显示的是另外一个部分。

渐变——background-image

  • 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
    渐变是图片,需要通过background-image属性来设置

线性渐变，颜色沿着一条直线发生变化

  • 属性值：linear-gradient
    eg：linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域
    线性渐变的开头，我们可以指定一个渐变的方向
    to left
    to right
    to bottom
    to top
    deg deg表示度数
    turn表示圈
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to top, red,yellow);
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(45deg, red,yellow);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(.5turn, red,yellow);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

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

输出：
在这里插入图片描述

  • 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
    eg：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 1000px;
            height: 600px;
            background-image: linear-gradient(red,orange,rgb(235, 235, 57),rgb(91, 247, 91),rgb(102, 219, 219),rgb(74, 74, 250),purple);
        }
    </style>
</head>
<body>
    <div class="box1">

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

在这里插入图片描述

  • 也可以手动指定渐变的分布情况
    颜色后面可以添加 px 数值，表示该颜色的起始位置，从该位置开始渐变
 .box1{
            width: 200px;
            height: 200px;
            background-image: linear-gradient( red 50px,yellow);
            float: left;
        }

在这里插入图片描述

repeating-linear-gradient（）可以平铺线性渐变

        .box1{
            width: 200px;
            height: 200px;
            background-image: repeating-linear-gradient(red 50px,yellow 100px);
            float: left;
        }

在这里插入图片描述
background-repeat不会对该效果产生影响。

径向渐变

放射性效果
默认情况下径向渐变圆心的形状根据元素的形状来计算的：

  • 正方形–>早形
  • 长方形–>椭圆形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(red,yellow);
        }

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

    </div>

    
</body>
</html>

输出：
在这里插入图片描述

  • 我们也可以手动指定径向渐变的大小
        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(100px,100px,red,yellow);
        }

circle:代表圆形
ellipse：代表椭圆

  • 可以使用repeating
background-image: repeating-radial-gradient(100px,100px,red,yellow);
  • 可以指定渐变的起始位置
 background-image: radial-gradient(100px, 100px at 0 0,red,yellow);
  • 语法小结
    radial-gradient(大小 at 位置，颜色 位置,颜色 位置,颜色 位置)
    大小:
    circle圆形
    ellipse 椭圆
    closest-side 近边
    closest-corner近角
    farthest-side远边
    farthest-corner远角
    位置:
    top right left center bottom
标记语言——CSS布局
09-28
同时，通过添加内补丁和背景色，可以增强页首和页尾的视觉效果。 浮动布局的关键在于，需要确保侧边栏的`<div>`在主要内容的`<div>`之前，这样侧边栏会自动与主要内容顶部对齐。通过设置`float:right`或`float:left...
表示颜色的单词 CSS background-color
wuyujin1997的博客
11-24 708
上网的时候突然打开F12，想改一下 body 标签的 background-color 。 鼠标单击background 属性的值，开始编辑：删除默认值，然后可以看到一个下拉列表，让我们选一种颜色。 然后我突然就想拿到这个列表里的所有单词，然后把有用的颜色(好看的颜色)背下来。background-color switch用这些单词设置颜色，写了个HTML，方便查看： 源码： 颜色 单词 background 与 background-color 的区别 See at: https://www.runo
background-color和background-image问题
weixin_30527143的博客
11-21 841
今天撸码的时候发现需要background-color和background-image 一起用，才开始考虑两个可不可以一起用 查阅多方资料才知道可以写成background：color url（）； 合并起来写 只有只有这样的顺序才有效，分开写也可以，不过color必须写在前面，image必须写在后面才生效。 无论是background：red； background：u...
CSS3选择器
桃花扇的博客
03-22 332
一、Relationship Selectors E + P：选择下一个满足条件的兄弟元素节点 E ~ P：选择所有满足条件的兄弟元素节点 <html lang="en"> <head> <style> *{ margin: 10px 10px ; } div { ...
学习CSS3之animation所遇到的坑
Sallywa的博客
12-26 754
关于translate和left用于描述位置 之前想做一个div在原地倾斜后，以同样的倾斜度再向前移动100px的动画，但是我是这么写的，这样写的问题在于translate会会基于原本的倾斜角度前进，而不是在水平方向上移动 0% { transform: rotate(0deg) translate(0,0); } 25%{ left: 0; transform: ro...
CSS背景设置
wujianrenn的博客
10-30 1万+
CSS背景属性：背景颜色设置，背景图片，背景平铺，背景图片位置，背景图片固定，背景样式合写，背景色半透明
HTML+CSS实现漂亮的背景实例
09-25
HTML 和 CSS 是构建网页设计的基础，它们允许开发者创建具有视觉吸引力和功能性的界面。...对于想要进一步提升自己在CSS背景设计方面能力的开发者来说，深入研究这些属性的用法和交互是非常有益的。
狂神说——CSS3最新教程快速入门通俗易懂
05-26
本教程“狂神说——CSS3最新教程快速入门通俗易懂”旨在帮助初学者快速掌握CSS3的核心概念和实际应用，通过实例解析，使学习过程更为直观易懂。 一、选择器增强 1. 类选择器：CSS3扩展了类选择器的用法，如`....
css3登录界面效果粒子动态背景——（纯蓝色背景不透明）
05-13
在本文中，我们将深入探讨如何使用CSS3来创建一个具有粒子动态背景的纯蓝色不透明登录界面效果。CSS3作为现代网页设计的核心技术之一，提供了丰富的样式和动画功能，使得开发者能够创造出各种视觉上引人入胜的效果。...
页面——CSS+html
11-21
本篇将深入探讨“页面——CSS+html”这一主题，以及它们如何协同工作，创建出优秀的个人联系页面。 HTML是用于构建网页结构的标记语言，它定义了网页内容的元素，如标题、段落、链接等。在个人联系页面中，HTML会...
用CSS设置颜色、背景和图像效果
微风洋洋的博客
02-08 2万+
这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识，重要的知识点就是图文混排，尤其要注意图片的位置，为后面将相对位置、绝对位置做好铺垫。
CSS 背景
shenwen5225的博客
12-24 1830
文章目录background-colorbackground 属性 描述 版本 background-color 背景颜色。 CSS1 background-image 背景图像。 CSS1 background-position 背景图像位置。 CSS1 background-size 背景图像的尺寸大小。 CSS3 background-repeat 背景图像如...
CSS 背景颜色
weixin_44664352的博客
09-14 1073
background-color background-color 属性指定元素的背景色。 实例 页面的背景色设置如下： body { background-color: lightblue; } 还可以为任何 HTML 元素设置背景颜色： h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } 不透明度 / 透明度 opacity
#CSS 背景颜色
weixin_43097301的博客
09-29 1万+
1、背景颜色 background-color 属性主要用于设置元素的背景颜色，可以使用的颜色为Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa” section.t1 { background-color: red; } section.t2 { background-color: #008800; } section.t3 { background-col...
css好看背景色汇总
热门推荐
FBm的博客
11-22 3万+
1 #D24D57
CSS 背景颜色 background-color属性
歪脖先生的博客
02-17 3万+
背景颜色背景颜色是背景应用中最基础的属性，使用 background-color属性，几乎可以为任何元素定义背景颜色，该属性不能被继承，其默认值是 transparent，即透明背景。也就是说，如果一个元素没有显式定义背景颜色，那么其背景是透明的，就可以透过该元素看到其祖先元素的背景。background-color属性接受任意合法的CSS颜色值，如预定义的颜色名、十六进制数值、RGB值、RGB百...
CSS3_3D变换（七）
最新发布
。
11-10 605
介绍CSS3中3D变换的概念与具体应用。
导航栏及下拉菜单的实现
2301_77699763的博客
11-07 194
主要有导航栏及下拉菜单组成。
HTML5和CSS3 介绍
Zhao_0912的博客
11-04 967
HTML5 是 HTML 的第五个主要版本，它是对前一版本（HTML4 和 XHTML）的重大改进。HTML5 引入了许多新特性，旨在简化网页开发，提高用户体验，并支持更丰富的多媒体和交互功能。CSS3 是 CSS 的第三个主要版本，引入了许多新特性，旨在提供更丰富的样式控制和更强大的布局能力。CSS3 通过模块化的方式，逐步引入新功能，每个模块都可以独立发展和标准化。
CSS从入门到精通——背景样式
09-03
CSS（层叠样式表）是一种用于描述网页样式的标记语言，通过控制网页元素的外观和布局来美化页面。背景样式在 CSS 中扮演了重要角色，可以通过设置背景颜色、背景图片、背景大小、背景重复等属性来改变元素的背景效果。以下是一些常用的背景样式属性： 1. 背景颜色（background-color）：用于设置元素的背景色，可以使用命名颜色或者十六进制颜色值。 示例： ```css div { background-color: red; } ``` 2. 背景图片（background-image）：用于设置元素的背景图片，可以使用图片的 URL 来指定。 示例： ```css div { background-image: url("image.jpg"); } ``` 3. 背景大小（background-size）：用于设置背景图片的尺寸大小，可以使用关键字（如 `cover`、`contain`）或具体数值（如像素、百分比）来指定。 示例： ```css div { background-size: cover; } ``` 4. 背景重复（background-repeat）：用于设置背景图片的重复方式，可以是水平重复、垂直重复或者不重复。 示例： ```css div { background-repeat: repeat-x; } ``` 5. 背景定位（background-position）：用于设置背景图片的起始位置，可以使用关键字（如 `top`、`center`、`bottom`）或具体数值（如像素、百分比）来指定。 示例： ```css div { background-position: center; } ``` 以上是一些常用的背景样式属性，通过灵活运用它们，可以实现丰富多样的背景效果。希望对你有所帮助！如需了解更多，请参考相关的 CSS 教程或文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值