精华内容
下载资源
问答
  • CSS背景颜色之奇技淫巧

    万次阅读 2021-03-18 16:04:02
    1.1 背景颜色background-color 1.2 背景图片 background-image 1.3 背景平铺 background-repeat 1.4 背景图片位置 background-position 1.5 背景图像固定 background-attachment 1.6 背景色半透明 rgba

    一、背景

    通过CSS背景属性,可以给页面元素添加背景样式。

    背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

    1.1 背景颜色background-color

    语法:

    background-color:transparent: color
    

    一般情況下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色

    1.2 背景图片 background-image

    background- -image.属性描述了元素的肖景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)

    语法:

    background-image: none | url(url)
    

    1.3 背景平铺 background-repeat

    如果需要在HTML页面上对背景图像进行平铺,可以使用 background-repeat属性。

    语法:

    background-repeat:repeat | no-repeat | repeat-x | repeat-y
    

    注意:默认是平铺的

    此外,当我们设置有背景颜色和背景图片的时候,颜色在图片之下。

    div {
      width: 500px;
      height: 500px;
      background-color: teal;
      background-image: url(./media/pig.jpg);
      background-repeat: no-repeat;
    }
    

    效果:
    在这里插入图片描述

    1.4 背景图片位置 background-position

    利用 background-position属性可以改变图片在肯景中的位置

    background-position:x y
    

    参数代表的意思是:X坐标和Y坐标。可以使用方位名词或者精确单位

    参数值 说明
    length 百分数」由浮点数字和单位标识符组成的长度值
    position top | center I bottom | left I center | right 方位名词

    注意事项:

    • 参数是方位名词

      • 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top和 top left效果一致
      • 如果只指定了一个方位名词,另一个值省略则第二个值默认居中对齐
    • 参数是精确坐标

      • 第一个必须是x,第二个必须是y
      • 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
    • 混合参数

      • 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是X坐标,第二个值是y坐标

    示例:

    div {
      width: 500px;
      height: 500px;
      background-color: teal;
      background-image: url(./media/pig.jpg);
      background-repeat: no-repeat;
      background-position: left bottom;
    }
    

    效果:background-position:left bottom;
    在这里插入图片描述
    background-position:center center;
    在这里插入图片描述
    示例:background-position: 20px 50px;

    div{
      width: 500px;
      height: 500px;
      background-color: pink;
      background-image: url(./media/pig.jpg);
      background-repeat: no-repeat;
      background-position: 20px 50px;
    }
    

    效果:
    在这里插入图片描述

    1.5 背景图像固定 background-attachment

    background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

    background- attachment后期可以制作视差滚动的效果。

    语法:默认scroll

    backgroound-attachment:scroll | fixed
    

    1.6 背景色半透明 rgba

    background:rgba(0,0,0,0.3)
    

    二、总结

    属性 作用
    background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
    background-image 背景图片 urI(图片路径)
    background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
    background-position 背景位置 ength/position分别是x和y坐标
    background-attachment 背景附着 scroll(肯景滚动)/ fixed(背景固定)
    背景简写 书写更简单 背景颜色 背景图片 地址 背景平铺 背景滚动 背景位置
    背景色半透明 背景颜色半透明 background:rgba(0,0,003): 后面必须是4个值
    展开全文
  • 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,url不要加引号。 3.背景平铺...

    CSS背景设置方法及背景附着

    1.背景颜色(color)

    语法:

    background-color:颜色值; 默认值是 transparent 透明的

    2.背景图片(image)

    语法:

    background-image:url("图片路径")

    背景图片
    小技巧:提倡背景图片后边的地址,url不要加引号。

    3.背景平铺(repeat)

    语法:

    background-repeat:repeat : repeat | no-repeat | repeat-x | repeat-y

    背景平铺

    4背景位置(position)重点

    语法:

    background-position : lenth || length background-position : position || position

    背景位置

    铁汁们 注意点来了

    1.必须先指定background-image属性
    2.position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
    3.如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
    4.如果只指定了一个方位名词,另一个值默认居中对齐。
    5.如果position后面是精确坐标,那么第一个,肯定是×第二的一定是y
    5.如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
    7.如果指定的两个值是精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标

    实际工作中用得最多的,就是个背景图片居中对齐了

    5.背景附着

    背景附着就是解释背景是滚动还是固定的

    语法:

    background-attachment : scroll | fixed

    背景附着

    6.背景简写

    background:属性的值的书写顺序并没有强制标准 为了可读性 建议大家如下写:
    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

    background: transparent url ("image.png") repeat-y scroll center top;

    7.背景透明(css3)

    语法:

    background: rgba(0,0,0,0.3)

    1.最后一个参数是alpha透明度取值范围0~1之间
    1.我们习惯把0.3的О省略掉这样写background: rgba(0,o,0,.3);
    3.注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
    4.因为是CSs3,所以低于ie9的版本是不支持的。

    8.背景总结

    背景总结

    展开全文
  • HTML背景颜色及透明度设置

    万次阅读 2017-07-10 16:51:35
    设置背景颜色有三种方法,分别是:sRGB,十六进制和颜色名; 十六进制: text RGB: text 颜色名:(如:yellow,lightred,black等等) text 用RGB值法还可以设置背景颜色的透明度,我一般把它...

    初学HTML,在学习的过程中偶然发现了背景颜色透明度的设置方法挺有趣,顺便把颜色的设置方法复习总结一下


    设置背景颜色有三种方法,分别是:sRGB,十六进制和颜色名;


    十六进制:

    <p style="background-color:#FFFF00">
    text
    </p>

    RGB:

    <p style="background-color:rgb(255,55,155)">
    text
    </p>

    颜色名:(如:yellow,lightred,black等等)

    <p style="background-color:lightblue">
    text
    </p>


    用RGB值法还可以设置背景颜色的透明度,我一般把它用于调整颜色的浓淡,比起改RGB值或是十六进制来说要便利很多

    <p style="background-color:rgba(255,55,155,0.8)">
    text
    </p>

    background-color后面用rgba取代rgb,a指的是透明度,范围是从0到1,即括号内的第四个值


    斯在web方面的学习刚刚开始,如有谬误之处还望不吝赐教




    展开全文
  • 背景颜色设置 Windown->Preferences->Editors->Text Editors->Background color->Color 让左侧由白变成与背景色相同的颜色 这一部分好多的博客都是单单设置背景色,没有设置workplace,这里都是白的...

    背景颜色设置

    Windown->Preferences->Editors->Text Editors->Background color->Color

    在这里插入图片描述

    让左侧由白变成与背景色相同的颜色

    这一部分好多的博客都是单单设置背景色,没有设置workplace,这里都是白的,我一不小心把背景色改了结果界面不协调了,忘了之前怎么设置左边的背景色了,百度又花了点时间,我就直接写出来了,省得以后改又得花时间百度,不如找自个的博客来得快。

    在这里插入图片描述
    桌面右击个性化->窗口颜色->高级外观设置
    在这里插入图片描述
    设置豆沙绿 色调:85,饱和度:123,亮度:205
    主题颜色jar包下载
    有需要的自己去下载
    在这里插入图片描述

    展开全文
  • elementui更改el-table表头背景颜色和字体颜色

    万次阅读 多人点赞 2019-02-13 17:47:14
    于是,博主尝试更改一下表头的背景颜色和字体颜色,方法如下: 根据elementui官网的说法,header-cell-style是表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 ...
  • HTML设置背景颜色及背景图片

    千次阅读 2020-08-26 23:17:27
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素,将会一个部分背景无法完全显示 - 如果背景...
  • FinalShell更换背景颜色

    千次阅读 2020-11-11 17:49:34
    打开FinalShell点击右上角多功能按键,点击选项 打开后点击左任务栏目 配色 ,即可在右窗口选择合适的背景颜色
  • 设置idea背景颜色

    千次阅读 2019-09-21 09:37:46
    1.设置右侧背景颜色 2.设置左侧背景颜色
  • BootStrap4 文本颜色和背景颜色

    千次阅读 2019-08-28 12:43:43
    BootStrap4 文本颜色和背景颜色属性值和显示效果
  • 在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。 在css中设置背景颜色透明的方法有两种...
  • 设置eclipse背景颜色和字体颜色

    万次阅读 2018-03-18 11:41:56
    改变背景颜色(黑底背景的设置)1.windows-&gt;Preferences-&gt;在左边选择General-&gt;Editor-&gt;Text Editors,右边选择Appearance color options ,选Background color 选择背景颜色,取消...
  • IDEA修改背景颜色大全(护眼绿等)

    万次阅读 多人点赞 2019-05-16 16:39:54
    一.IDEA默认有3种背景颜色 路径为File->settings->Editor->Color Scheme可以设置软件默认颜色,旁边的小齿轮添加颜色名字 二.IDEA扩展颜色(护眼绿) 第一种方法: IDEA设置一张背景图片,路径:File-...
  • 设置MFC框架的背景颜色以及对话框的背景颜色? 实现WM_CTLCOLOR消息。 在CPP中添加 BEGIN_MESSAGE_MAP(CDddDlg, CDialog)  //{{AFX_MSG_MAP(CDddDlg)  ON_WM_SYSCOMMAND()  ON_WM_PAINT()  ON_WM_...
  • Flutter 设置背景颜色

    千次阅读 2020-07-31 15:58:46
    以上代码,给当前页,某个盒子设置背景颜色都可以 这个是当前页的背景颜色 Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('提交订单'), ), body: Conta....
  • NotePad++设置背景颜色和字体颜色

    万次阅读 2019-06-15 15:03:57
    我们使用NotePad++的时候,使用时间长了可能会眼花,这时候就可以设置一下背景颜色和字体颜色给我们的眼睛放松一下了,小编接下来就带你修改NotePad++的背景颜色: 首先打开NotePad++:找到Settings ===> ...
  • 修改Matlab的背景颜色

    万次阅读 多人点赞 2019-04-07 20:18:23
    其实使用界面操作就可以改变背景颜色 步骤 点击 主页—>预设(预设在布局右边) 点击 颜色,出现以下界面。在这里,默认是勾选“使用系统颜色”的。我们把这一项取消勾选! 取消勾选以后,“文本”和...
  • OpenCV图像旋转,指定填充背景颜色边界颜色OpenCV与图像旋转有关的函数:(1)warpAffine函数OpenCV官方对warpAffine的解释: void warpAffine(InputArray src, OutputArray dst, InputArray M, Size dsize, int ...
  • echarts 背景颜色透明

    万次阅读 2017-10-09 14:13:18
    echarts 背景颜色透明,文章整理上传于2017年10月9日 描述:  使用'dark'系列主题初始化控件,控件会自带黑色背景色,与页面整体风格不符合,所以需要将其背景颜色设置为透明. 官网文档: ... background
  • 背景颜色透明

    千次阅读 2018-02-19 11:26:20
    背景颜色透明:opacity:透明度。 值:0~1之间。0:完全透明;1:不透明。 问题:在背景透明的过程中会把元素上的文字一起透明。rgba:透明。仅透明背景。格式:(数字,数字,数字,opacity值)。 说明:前三个数字为...
  • #CSS 背景颜色

    千次阅读 2018-09-29 21:13:28
    1、背景颜色 background-color 属性主要用于设置元素的背景颜色,可以使用的颜色为Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa” section.t1 { background-color: red; } section....
  • android的progressbar修改背景颜色跟进度条颜色,使用渐变的颜色来设置进度条的颜色和背景的颜色。
  • vscode自定义背景颜色

    千次阅读 2018-12-13 15:02:00
    vscode自定义背景颜色    大概做前端的builder(只会打代码的才是coder,嘻嘻~)一半以上都会使用vscode编辑代码吧,vscode很轻量,支持的文件拖拽加入编辑区功能我个人认为很方便很强大。 下面我写一下怎么...
  • Dev GridControl 表头字体颜色 表头背景颜色 字体颜色 选中行颜色 表体颜色 表格线颜色 选中单元格颜色 空白区域颜色 表头字体颜色 for (int i = 0; i &amp;lt; this.gridView1.Columns.Count; i++) { ...
  • vue+ elelment-ui +tree树形组件背景颜色的修改,直接在Element官网拷贝过来的树形组件背景颜色是白色,每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他...
  • 1、给所有页面设置背景颜色在app.wxss里设置page{background-color:#f3f3f3;}2、给单个页面设置背景颜色在单个页面的.wxss里设置page{background-color:#dddddd;}page前面不需要加点...
  • CSS 背景颜色 background-color属性

    万次阅读 2018-02-17 20:49:12
    背景颜色背景颜色是背景应用中最基础的属性,使用 background-color属性,几乎可以为任何元素定义背景颜色,该属性不能被继承,其默认值是 transparent,即透明背景。也就是说,如果一个元素没有显式定义背景颜色,...
  • 再加上背景颜色就很浅浅的小清新颜色,导致整体看起来特别糊,没有那种很强烈的对比感,这样代码看起来感觉糊到一起去了,这种视觉上给我的感觉特别糟糕,有种这种看着这种界面就不想码代码的感觉。于是我查阅网上...
  • PDF删除背景颜色

    千次阅读 2018-12-26 11:30:46
    其中PDF格式的文件相对难以修改,当我们遇到一份背景颜色较深的pdf文件,我们应该如何删除pdf文件中的背景颜色呢?想知道答案的小伙伴们,继续往下阅读吧。 1、当我们用pdf编辑器将pdf文件给打开之后,我们可以...
  •  翻开之前仿作的小米官网页面,打开谷歌浏览器的手机端界面,发现我之前做的界面背景颜色和背景图片会变得非常小,具体图如下: 可以看到我们无论是背景图片或者背景颜色都没有显示出来,针对这个问题先进行了思考...
  • INTERLLij IDEA 修改背景颜色护眼

    万次阅读 多人点赞 2018-06-20 21:54:19
    不过软件的默认字体太小,对于我这个有着500多度近视的人来说简直痛苦,特地整理了一些修改背景颜色的方法, 供大家参考。 1.IntelliJ IDEA设置菜单栏字体: File — Setting — Appearance &amp; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,783
精华内容 23,913
关键字:

背景颜色