CSS背景样式

最新推荐文章于 2023-09-12 10:44:36 发布
最新推荐文章于 2023-09-12 10:44:36 发布
阅读量632 收藏 1
点赞数 1
文章标签： css sass html vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCdongchao/article/details/124823673
版权

1、设置背景颜色

background-color：；属性值直接设置颜色单位

<style>
p｛ 
     width: 100px;
     height: 100px;
     text-align: center;
     border: 1px solid black;
     /* 背景色 */
     background-color: red;
｝
</style>
<body>
            <p> </p>
</body>

 

2、设置背景图片

background-image: url(./vscode/猫咪.png);

——图片在元素中位置

                   如果背景图片大于元素，默认是显示图片左上角

                   如果一样大，则正常全部显示

                   如果图片小于元素，则默认情况下，背景图片会平铺充满元素

<style>
p｛ 
     width: 100px;
     height: 100px;
     text-align: center;
     border: 1px solid black;
     /* 设置背景图片 */
     background-image: url(./vscode/猫咪.png);
｝
</style>
<body>
            <p> </p>
</body>

 

 

background-repeat: ; 设置背景图片重复的方式

                可选值：

                repeat  默认值  双方向重复

                no-repeat  不重复，有多大就显示多大

                repeat-x  水平方向重复

                repeat-y  垂直方向重复

<style>
  p {       float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: red;
            text-align: center;
            border: 1px solid black;
            /* 设置背景图片 */
            background-image: url(./vscode/猫咪小.png);
            background-repeat: no-repeat;
        }
.p2{background-repeat: repeat-x;}
.p3{background-repeat: repeat-y;}
</style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

 background-position: ; 设置图片在元素中的位置

                         默认是在元素的左上角

                  可选值：

                    1、 top right  left  bottom  center中两个值

                     如果只写一个值，第二个值默认是center

                    2、也可以直接指定两个偏移量

                       第一个值，是水平的偏移量  可正（向右） 可负（向左）

                       第二个值，是垂直的偏移量   可正（向下） 可负（向上）

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: red;
            text-align: center;
            border: 1px solid black;
            /* 设置背景图片 */
            background-image: url(./vscode/猫咪小.png);
            background-repeat: no-repeat;
            background-position: 50px 100px;
        }
        .p2{background-repeat: no-repeat;background-position: center;}
        .p3{background-repeat: no-repeat;background-position: top;}
    </style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

background-clip: ; 设置背景的范围

                 可选值：

                   border-box  默认值，背景色会出现在边框下面

                   padding-box  背景就不会出现在边框下，出现在内容区和内边距区

                   content-box  背景图只出现在内容区下面

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: red;
            text-align: center;
            border: 20px double black;
            padding: 20px;
            /* 设置背景图片 */
            background-image: url(./vscode/猫咪小.png);
            background-clip: border-box;
        }
        .p2{background-clip: content-box;}
        .p3{background-clip: padding-box;}
    </style>


    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

 

background-origin: ;  设置背景图片偏移量原点

                    一般情况下，配合background-position使用

                可选值

                   border-box  从边框开始计算偏移量

                   padding-box 默认值  从内边距开始计算

                   content-box 从内容区开始计算偏移量 

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: red;
            text-align: center;
            border: 20px double black;
            padding: 20px;
            /* 设置背景图片 */
            background-image: url(./vscode/猫咪小.png);
            background-repeat: no-repeat;
            background-origin: border-box;
        }
        .p2{background-origin: content-box;}
        .p3{background-origin: padding-box;}
    </style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

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

                1: 参数

                 第一个值：宽度

                 第二个值：高度

                   如果只写一个，第二个值，为auto

                2:cover  图片的比例不变，将元素铺满

                  contain  图片比例不变，将元素完整显示

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: red;
            text-align: center;
            border: 20px double black;
            padding: 20px;
            /* 设置背景图片 */
            background-image: url(./vscode/猫咪小.png);
            background-repeat: no-repeat;
            background-size: 100px 200px;
        }
        .p2{background-size: contain}
        .p3{background-size: cover;}
    </style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

渐变

           一种复杂的背景颜色，一种颜色向另一种颜色的过渡

           渐变更像一种图片，通过background-image设置

linear-gradient(方位，颜色1，颜色2···)

          参数1:

            方位（不写，默认从上到下to bottom）

              (1)to left , to right ,to bottom ,to top

              (2)turn  表示圈

              (3)xxxdeg  表示角度 度数

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            text-align: center;
            padding: 20px;
            /* 设置背景渐变 */
            background-image: linear-gradient(to right, red,yellow,green);
        }
        /* 转0.1圈 */
        .p2{background-image: linear-gradient( 0.1turn,red,yellow,green);}
        /* 转45度 */
        .p3{background-image: linear-gradient(45deg,red,yellow,green);}
    </style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

 repeating-linear-gradient()  平铺线性渐变    

 radial-gradient() 放射渐变  

           参数

             1:圆心的形状(默认是根据元素的形状来计算的)

                （1）circle  圆形

                （2）ellipse  椭圆

                （3）设置圆心的大小

                      宽度 高度

                   

    <style>
        p {float: left;
            margin: 10px;
            width: 200px;
            height: 200px;
            font-size: 30px;
            text-align: center;
            padding: 20px;
            /* 设置背景 */
            background-image: repeating-linear-gradient(red 20px  ,yellow 100px );
} 

        .p2{ background-image: radial-gradient(red,yellow);}

        .p3{background-image: radial-gradient( 50px 20px  ,red,yellow);}
    </style>

    <body>
            <p class="p1"> 我是一个P标签1</p>
            <p class="p2"> 我是一个P标签2</p>
            <p class="p3"> 我是一个P标签3</p>
    </body>

 

马东超
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 背景样式
天空之外
09-15 229
我们平时看到的网页中会有各式各样的背景样式，例如有用颜色作为背景的，也有图片作为背景的。添加背景样式能够让网页更好看，那么要如何设置页面的背景样式呢，这就是本节我们要学习的内容。 背景颜色 首先我们来讲如何设置背景颜色，浏览器页面的默认背景颜色为白色，但是很多时候为了页面的美观我们会重新设置一个背景颜色，一般在一个网站中大部分页面都会采用某个统一的背景颜色。 我们可以通过CSS 中的 background-color 属性来设置背景颜色 ，这个属性可以接受任何合法的颜色值，像颜色名称、十六进制颜色值、RGB
前端之CSS
banjujiu0693的博客
09-04 84
CSS： 　　CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。 　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染） CSS注释： /*这是CSS注释*/ CSS的几种引入方式： 　　行内式：是在标记的style属性中设定CSS样式。但是不推荐大规模使用。 <p style="color: r...
我的前端学习笔记02—CSS
weixin_44698814的博客
02-27 199
网页分三部分： 结构（HTML） 表现（ CSS ） 行为 （JAVAScript） CSS 层叠样式 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们只能看到网页的最上面一层 总之，CSS是用来设置网页中的元素的样式 1.用CSS来修改元素的样式 第一种方式(内联样式，行内样式)： 在标签内部通过style属性来设置元素的样式 问题： 使用内联样式，样式...
css 背景样式设置
weixin_43294560的博客
06-30 1181
背景颜色设置 background-color:red background-color:rgba(x,x,x,透明度) 设置背景线性渐变图像 background-image: linear-gradient(to right/to bottom right/角度deg(可选),red, yellow, blue); //默认从上到下 to bottom right:从左上角到右下角 透明度设置(可用于所有样式) opacity:0.5； 取值为0到1，0为完全透明，1为不透明，
CSS背景设置
wujianrenn的博客
10-30 9873
CSS背景属性：背景颜色设置，背景图片，背景平铺，背景图片位置，背景图片固定，背景样式合写，背景色半透明
css 背景样式属性说明
09-25
css 背景样式属性说明 CSS 背景样式属性是控制网页背景样式的基本属性，它包括背景颜色、背景图片、背景重复、背景固定、背景定位等多个方面。下面对这些属性进行详细的解释： 1. 背景颜色（background-color） ...
Css样式--背景样式详解
09-25
背景样式包括背景色、背景图像等等，在图片背景比较多的网页中经常会用到，本文整理了一些，个人感觉还不错，希望对大家有所帮助
css背景样式渐变代码
04-26
在探讨“css背景样式渐变代码”的过程中，我们首先应当明确CSS（层叠样式表）在网页设计中的重要性。CSS是一种用来描述HTML或XML等文档样式的语言，它不仅能够美化网页，还能够实现更加复杂的布局效果。渐变背景作为...
浅谈CSS样式之背景、文本
09-24
下面小编就为大家带来一篇浅谈CSS样式之背景、文本。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
边框给背景图css怎么写,使用css设置边框背景图片
weixin_35566895的博客
08-03 4676
使用css的特有属性，给不同的盒子添加边框图片。为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。这里我们主要使用到的属性有：border-image-sourceborder-image-sliceborder-top-widthborder-image-repeat个别属性可以根据自己的个人情况决定是否添加，希望使用的时候自己甄别。切边框图片的顺序:下面是我的代码...
Web前端开发之CSS学习笔记3—颜色和背景
qq_45709187的博客
04-30 2756
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 background-repeat属性设置是否及如何重复背景图像 2.2.1 background-repeat: no-repeat设置背景图不重复 2.2.2 background-repeat: space / repeat-x的区别 2.3background-position属性设置背景图像的..
CSS样式——背景图片
m0_67391270的博客
03-19 3423
文章目录 颜色color 图片image 图片大小size 重复repeat 滚动行为attachment 坐标position 位置origin 裁剪clip 颜色color 用颜色作为背景。 <div id="app"></div> * { margin: 0; padding: 0; } #app { width: 400px; height: 300px; background-color: red; } 图片image 默认会显示不全 backgrou
css学习之元素的高度、宽度、背景颜色、背景图片及位置（二）
qq_43534980的博客
04-23 946
三种选择器优先级 Id选择器（选一个） class选择器（选多个） 元素选择器 （选一种元素） 2.尺寸： h1{ background-color: red; /*元素的高度，可以设置固定长度 */ height: 500px; /* 元素的高度，可以设置百分比 */ width: 60%; /*对于单行文本设置line-height=元素的height可以使其居中*/ line-height: 500px; } 示例截图： 3.背景颜色的详细说明 h.
CSS改变图片颜色的三种方法
and_life的博客
04-25 9424
filter: drop-shadow(70px 0 0 #EA5E30) //关键。一.filter: drop-shadow(). 设置图片的阴影。二.background-blend-mode 背景的混合模式。也可以实现渐变的效果。
CSS基础之背景样式
沃和莱特的博客
05-07 1863
前言： 当我们在网上浏览各种好看的页面时，网页的背景样式往往是吸引我们眼球的重要因素，有用颜色作为背景图的，也有用图片作背景图的。那么怎样利用CSS简单设置一个背景图呢，来看看叭~
html设置背景颜色宽度,如何设置div的背景色和高度 CSS示例代码
热门推荐
weixin_42528296的博客
06-16 1万+
对DIV设置背景色同时设置宽度和高度CSS样式，当然DIV的背景色、DIV宽度、DIV高度是不同的CSS样式属性代码。一、三个样式CSS单词：background —— 背景样式width —— 宽度height —— 高度二、给予值与解释：background:#FFFFFF设置背景色为白色width:300px设置宽度为300pxheight:100px设置高度为100px三、同时div设置背...
02_CSS样式之背景参数设置
最新发布
henry_rhy的博客
09-12 463
* 5.设置背景的显示位置 background-position: top center*//* 1.设置背景颜色:background 或者 background-color *//* 2.设置图像为背景图像:background-image */./day_16_前端css学习_20220709/600.jpg。/* 3.设置背景平铺:background-repeat*//* 4.设置背景大小:background-size*/
css背景样式设置
05-26
要设置CSS背景样式，可以使用`background`属性。以下是一些常用的`background`属性的值： 1. `background-color`: 设置背景颜色，可以使用颜色名称、十六进制值或者RGB值。 2. `background-image`: 设置背景图片，可以使用图片的URL地址或者`none`。 3. `background-repeat`: 设置背景图片的重复方式，可以使用`repeat`（默认值，水平和垂直方向均重复）、`repeat-x`（水平方向重复）、`repeat-y`（垂直方向重复）或者`no-repeat`（不重复）。 4. `background-position`: 设置背景图片在元素中的位置，可以使用长度值（如`10px 20px`）或者关键字（如`top`、`left`、`center`等）。 5. `background-size`: 设置背景图片的尺寸，可以使用长度值、百分比或者关键字（如`cover`、`contain`等）。 以下是一个设置CSS背景样式的例子： ```css div { background-color: #f0f0f0; background-image: url('background.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; } ``` 这个例子将一个`div`元素的背景设置为灰色，同时使用一张名为`background.jpg`的背景图片，不重复，居中显示，尺寸自适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值