CSS学习笔记（三）CSS 背景，CSS 边框

最新推荐文章于 2023-06-02 11:37:55 发布

〔晴【天】º〕

最新推荐文章于 2023-06-02 11:37:55 发布

阅读量213

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/116790738

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS 背景

CSS 背景属性用于定义元素的背景效果。

我们将学习如下 CSS 背景属性：

background-color
background-image
background-repeat
background-attachment
background-position

CSS background-color

background-color 属性指定元素的背景色。

通过 CSS，颜色通常由以下方式指定：

有效的颜色名称 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 "rgb(255,0,0)"

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不透明度</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: red;
        }
        #one{
        	/* 没有opacity默认为1 */
            opacity: 1;
        }
        #two{
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="one">没有设置不透明度</div>
    <div id="two">设置不透明度为0.5</div>
</body>
</html>

结果：
在这里插入图片描述
注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGBA不透明度</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin-top: 10px;
            
        }
        #one{
            background-color: rgba(255, 0, 0, 1);
        }
        #two{
            background-color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div id="one">没有设置不透明度</div>
    <div id="two">设置不透明度为0.5</div>
</body>
</html>

结果：
在这里插入图片描述

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
元素内的文本不受不透明度的影响，不会使得阅读困难。

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-image</title>
    <style>
       body{
           background-image: url("./img/pic1.webp");
       }
    </style>
</head>
<body>
</body>
</html>

结果：
在这里插入图片描述
注意：图片路径的选择。

还可以不用在style元素里面写，直接写在body元素内，如下（达到的效果相同）：

<body background="./img/pic1.webp">
</body>

CSS 背景重复

CSS background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪。
图像仅在水平方向重复 (background-repeat: repeat-x;)
将它加入上面的代码中，得到结果：

body{
           background-image: url("./img/pic1.webp");
           background-repeat: repeat-x;
       }

在这里插入图片描述

提示：如需垂直重复图像，请设置

 background-repeat: repeat-y;

CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：
实例：
背景图像值显示一次：

body{
           background-image: url("./img/pic1.webp");
           background-repeat: no-repeat;
       }

CSS background-position
background-position 属性用于指定背景图像的位置。

实例
把背景图片放在右上角：

body{
           background-image: url("./img/pic1.webp");
           background-repeat: no-repeat;
           background-position: right top;
       }

结果：
在右上角显示图像

CSS 背景附着

CSS background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
实例
指定应该固定背景图像：

body{
           background-image: url("./img/pic1.webp");
           background-repeat: no-repeat;
           background-position: right top;
           background-attachment: fixed;
       }

实例
指定背景图像应随页面的其余部分一起滚动：

body{
           background-image: url("./img/pic1.webp");
           background-repeat: no-repeat;
           background-position: right top;
           /* 默认的是随着页面一起滚动（以下可以不要） */
           background-attachment: scroll;
       }

CSS 背景简写

CSS background - 简写属性
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

您能够使用简写属性 background:
实例
使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

CSS 边框

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset -定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框 hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
演示不同的边框样式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

结果：
在这里插入图片描述
注意：除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！
边框还有边框宽度border-width,边框颜色border-color的属性等，我的上一篇文章中写了我就不重复了。
传送门：点击这里盒子模型与怪异盒模型

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：
实例

p {
  border: 2px solid red;
  border-radius: 5px;
}

结果：
在这里插入图片描述
边框还有边框宽度border-width,边框颜色border-color的属性，我的上一篇文章中写了我就不重复了。还有关于外边距与内边距的知识也在上一篇文章中。
传送门：点击这里盒子模型与怪异盒模型

〔晴【天】º〕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS学习笔记（三）CSS 背景，CSS 边框

CSS 背景CSS 背景属性用于定义元素的背景效果。我们将学习如下 CSS 背景属性：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionCSS background-colorbackground-color 属性指定元素的背景色。通过 CSS，颜色通常由以下方式指定：有效的颜色名称 - 比如 “red”十六进制值 - 比如 “#ff0000”RGB
复制链接

扫一扫