精华内容
下载资源
问答
  • 1. background-color 作用:设置背景颜色 div { width: 200px; height: 200px; /* 1. 直接设置英文 */ /* background-color: pink; */ /* 2. 设置十六进制 */ /* background-color: #fff;

    以下代码均基于一个div盒子作介绍

    目录

    1. background-color

    2. background-image

    3. background-repeat

    4. background-position

    5. background-size

    6.background-clip

    7. background-origin


    1. background-color

    作用:设置背景颜色

            div {
                width: 200px;
                height: 200px;
                /* 1. 直接设置英文 */
                /* background-color: pink; */
                /* 2. 设置十六进制 */
                /* background-color: #fff; */
                /* 3. 设置rgb颜色模式 */
                /* background-color: rgb(0, 0, 0); */
                /* 4. 设置透明度 */
                background-color: rgba(0, 0, 0, .3);
            }

    2. background-image

    作用:插入背景图片

    参数:填写url地址

            div {
                width: 200px;
                height: 200px;
                background-image: url(./1111.jpg);
            }

    3. background-repeat

    作用:设置背景平铺;平铺的意思,可以理解为,如果盒子很大,背景图片没那么大,设置了平铺,就能够铺满盒子(的某个方向)

            div {
                width: 900px;
                height: 2000px;
                background-image: url(./1111.jpg);
                /* 1. 参数1:repeat 表示 x轴和y轴都铺满 */
                background-repeat: repeat;
                /* 2. repeat-x 表示 x轴铺满 */
                background-repeat: repeat-x;
                /* 3. repeat-y 表示 y轴铺满 */
                background-repeat: repeat-y;
                /* 4. 表示不平铺 */
                background-repeat: no-repeat;
            }

    4. background-position

    作用:调整背景图片的位置。以盒子的左上角的顶点为0,0的起点

            div {
                width: 900px;
                height: 900px;
                background-image: url(./1111.jpg);
                background-repeat: no-repeat;
                background-position: 10px 10px; 
                // 第一个值是x轴,第二个值是y轴
                // x轴正方向向右,
                // y轴正方向向下
            }

    5. background-size

    作用:调整背景图片的大小

    5.1 px

    • 直接给大小 第一个值是宽度 第二个值是高度
          div {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                background-image: url(./2.jpg);
                background-repeat: no-repeat;
                background-size: 500px 500px;
            }
    
    •   如果只给一个值,第一个值是宽度,第二个值会设置为自动调整,根据原比例 调整
             div {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                background-image: url(./2.jpg);
                background-repeat: no-repeat;
                background-size: 500px;
            }

    5.2 百分比

    • 给百分比 相较于父盒子宽度和高度的百分比
            div {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                background-image: url(./2.jpg);
                background-repeat: no-repeat;
                /* 2. 给百分比 相较于父盒子宽度和高度的百分比 */
                background-size: 100% 100%;
                /* 图片可能会变形 */
            }
    

    5.3 cover

    • 效果是图片能够完整显示,但是可能不会铺满盒子
    
            div {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                background-image: url(./2.jpg);
                background-repeat: no-repeat;
                background-size: cover;
            }

    5.4 contain

    • 效果是能够铺满整个盒子,但是图片可能显示不完全
    
            div {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                background-image: url(./2.jpg);
                background-repeat: no-repeat;
                background-size: contain;
            }
    

    -------------第二次更新

    6.background-clip

    背景的内容能够在哪里绘制

    取值:

    content-box

    padding-box

    border-box

        <div>
            1233333333333333333333
        </div>
            div {
                width: 400px;
                height: 200px;
                padding: 35px;
                background-color: pink;
                border: 5px dotted #000;
                background-clip: padding-box;
            }

    如果是值:padding-box:背景内容在边框以内开始绘制

     如果是content-box:背景内容在padding以内开始绘制

     如果是border-box:背景内容在边框开始绘制

    7. background-origin

            div {
                width: 400px;
                height: 200px;
                padding: 35px;
                border: 5px dotted #000;
                background-repeat: no-repeat;
                background-origin: content-box;
                background-size: 100px;
                background-image: url(./1111.jpg);
            }

    背景图片的绘制区域

    • border-box: 背景图片从左上角边框开始绘制

    •  padding-box:背景图片从左上角边框内部开始绘制

    •  content-box:背景图片从padding内部开始绘制

    结尾:

    学习id: 201903090124-7

    现在是大三学生,学习到了前后端交互的git阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。

    展开全文
  • background-color

    2021-03-10 19:33:33
    background-color属性用于定义元素的背景颜色 ■ 使用说明 语法: background-color: 属性值; 属性值:  transparent:表示背景颜色是透明,一般情况下元素背景颜色默认值是transparent(透明)  颜色值:预定义的...

    ■ 定义

    background-color属性用于定义元素的背景颜色

    ■ 使用说明

    语法:

    background-color: 属性值;
    

    属性值:

      transparent:表示背景颜色是透明,一般情况下元素背景颜色默认值是transparent(透明)

      颜色值:预定义的颜色值 / 十六进制 / RGB代码

    ■ 示例

    div {
        width: 100px;
        height: 50px;
        background-color: transparent;
    }
    
    span {
        width: 100px;
        height: 50px;
        background-color: black;
    }
    
    展开全文
  • backgroundbackground-color 的区别

    1、background-color

    background-color 用来设置元素的背景颜色

    背景颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)

    默认值为:transparent,无继承性

    示例:

    h1 {
      background-color: pink;
    }

    2、background

    background 可以设置所有的背景属性

    常见属性如下:

    • background-color  规定要使用的背景颜色
    • background-position  规定背景图像的位置
    • background-size  规定背景图片的尺寸
    • background-repeat  规定如何重复背景图像
    • background-image  规定要使用的背景图像

    示例:

    body {
      background: #00FF00 url(bgimage.gif) no-repeat fixed top;
    }

    给 body 设置背景颜色为 #00FF00,背景图像为 bgimage.gif,不平铺

    且背景图像不随页面滚动,图像的位置在中上方,因为如果只设置 top,center 将为第二个参数

    展开全文
  • background英 [ˈbækgraʊnd] 美 [ˈbækˌɡraʊnd]n.(画等的)背景;底色;背景资料;配乐复数: backgroundscolor英 ['kʌlə(r)] 美 [ˈkʌlɚ]n.颜色,色彩;肤色,脸色,血色;颜料,染料;本质v.给…涂颜色;改变…...

    background

    英 [ˈbækgraʊnd]   美 [ˈbækˌɡraʊnd]

    n.(画等的)背景;底色;背景资料;配乐

    复数: backgrounds

    color

    英 ['kʌlə(r)]   美 [ˈkʌlɚ]

    n.颜色,色彩;肤色,脸色,血色;颜料,染料;本质

    v.给…涂颜色;改变…的颜色;粉饰,渲染,使带上色彩;脸红

    第三人称单数: colors 复数: colors 现在分词: coloring 过去式: colored 过去分词: colored

    css background-color属性 语法

    background-color属性怎么用?

    background-color属性用来设置元素的背景颜色(纯色),语法为:background-color:颜色值。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。

    作用:设置元素的背景颜色。

    说明:background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

    注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    css background-color属性 示例

    body {background-color: yellow}

    h1 {background-color: #00ff00}

    h2 {background-color: transparent}

    p {background-color: rgb(250,0,255)}

    p.no2 {background-color: gray; padding: 20px;}

    这是标题 1

    这是标题 2

    这是段落

    这个段落设置了内边距。

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    热门推荐

    最新文章

    展开全文
  • background-color用于设置背景颜色,而color用于设置字体的颜色。 2、范围不同 background-color属性所设置的颜色会填充元素的内容、内边距和边框区域,扩展到边框的外边界(不包括外边距)。 color属性设置了一个...
  • background-color不显示

    2021-03-26 10:12:37
    background-color不显示 我在css设置,在我的浏览器显示正常,在老板的浏览器背景色无法显示,被说了好久这个问题。写成十六进制在使用移动端观看也无法显示出来。有的出来了,有的不出来,这出现了严重的兼容性问题...
  • 语法:layer-background-color : transparent | color参数:transparent : 背景色透明color : 指定颜色。请参阅颜色单位和附录:颜色表说明:设置或检索对象整个区域的背景颜色。示例:div { layer-background-color...
  • 在设计界面为QPushButton设置了样式 或者在QPushButton的上层对象的样式处设置了按钮的样式。 解决方法:删除设计界面设置的按钮样式,可能在不同层,widget,widget_3或者pushButton_5都有可能。
  • div使用background-color属性失效

    千次阅读 2021-01-15 14:35:11
    说一下我遇到的情况以及解决的方案。 我在这个div标签中使用了float属性,所以导致背景颜色属性失效,然后在后面加了一个无用的div标签,css属性加上以下内容,即可。 .clear { clear: both; } ...
  • 一个div同时设置background-colorbackground-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背景颜色,介绍两种方法:第一种,代码如下:css:.wrap{...
  • css盒子模型中的background-color能控制的盒子模型内的content、padding和border中的颜色。 当将border中的颜色设置为transparent,即透明时,border所呈现的颜色就是background-color属性中所定义的颜色。 当border...
  • 现在根据vue以及css属性选择器来进行实现功能 上代码 iview template css .ivu-input-wrapper[errorColor='true'] .ivu-input { background-color: #e6a23c; } element template css .el-input__inner[errorColor='...
  • 【错误做法】:在定义的新类中设置background-image为’#E3F1FB’。 【结果】:发现颜色一直没有生效,但是检查了类名确实已经添加,但是颜色没有生效。 原先代码为 // 原先颜色 .container { background-image:...
  • 一、题目用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况。二、题目解析1.考察底层JavaScript基础前端开发,日常最常接触的就是页面样式的编写。而摆脱jQuery等工具库,...
  • 设置background-color:red,height:100%,width:100% function App() { return ( , height: '100%', width: '100%'}}> </div> ); } 但是页面显示一片空白,查看元素发现div height为0,很邪乎: 差点把我的前端梦扼杀...
  • 1.background-color有什么用 1.backgroundcolor用来改变元素的背景元素如下 2.background-color的值 值 对应的效果 transparent 默认:背景颜色为透明。 red(yellow……) 红色(黄色……) #ff0000 ...
  • background-color 才能给不同元素设置背景颜色设置 而background:color,在vscode上没有这个东西 我以前设置的background:color 怪不得无效。 以下来自: CSS background-color 属性 | 菜鸟教程 摘抄自...
  • background-color这个属性可以用来控制盒子背景的颜色 但是控制的是哪一块儿呢 我们举个简单的例子来看一下 【1】边框透明的情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • h1.all {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {b更多相关问题区分新、旧民主革命的主要标志是A.革命任务B.革命对象C.革命前途D.革命领导权2008年1~9月,电子信息产业500万元以上...
  • CSS background-color属性作用:设置元素的背景颜色。background-color:颜色值;说明:background-color 属性为元素设置一种纯色背景。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不...
  • background-color: rgba(255,255,255,0); 效果如图: rgba() 函数 详解 rgba() 函数使用红®、绿(g)、蓝(b)、透明度(a)的叠加来生成各式各样的颜色。 rgba 即红色、绿色、蓝色、透明度(red, green, blue, alpha)...
  • background-color设置为透明的方法

    千次阅读 2020-12-26 12:09:03
    background-color:transparent; 不太好的方法(模仿透明,不仔细看,看不出来) /* 前三个参数是颜色,后一个是透明度,效果为白色背景透明。*/ background-color: rgba(255,255,255,0.2); jquery设置背景图片 ...
  • 答案来自: ...background 将取代所有以前的 background-colorbackground-image 等规范。 它基本上是一个速记,但也是一个重置。 ...
  • background-size:length|percentage|cover|contain; 值 描述 length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为auto(自动) percentage 将计算...
  • 最后查了百度,原因大概是ios系统和某些移动端对background-attachment:fixed不兼容,可用伪元素:before的方法代替background-attachment:fixed 原理:固定的伪元素设置一个背景图片 .section1:before{ content:...
  • view class="giftImg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view> 行内样式的写法可以使用数组语法也可以使用对象语法: 1.数组语法: // :style 的数组语法可以将多个...
  • background属性值

    2021-06-12 03:51:56
    js怎么获取css样式里的background属性值呢?ss文件中如何得到某个属性值: 一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式声明对象 , 只读, 此方法支持Firefox浏览器;...
  • CSS背景background详解,background-position详解

    千次阅读 多人点赞 2021-02-03 18:04:38
    这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 838,597
精华内容 335,438
关键字:

background-color

友情链接: BinaryConverter.rar