背景_背景色 - CSDN
精华内容
参与话题
  • html+css 设置背景图片

    2020-03-14 13:40:16
    看一下HTML代码: <body> <div class="box"></div> </body> CSS代码如下: *{ margin: 0; padding: 0; } .box{ position: absolute; top: 0; left: 0;... right:...

    看一下HTML代码:

    <body>
        <div class="box"></div>
    </body>
    

     

    CSS代码如下:

            *{
                margin: 0;
                padding: 0;
            }
            .box{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
            }
            .box::before{
                display: block;
                content: "";
                height: 100%;
                background: url("./img/6c89f115f22ef7516779f11434b310c1.jpg");
                background-size: cover;
            }

     上图即可实现 图片 自适应的效果了

    展开全文
  • 更换背景 免费更换三张,收费还算合理 https://www.gaoding.com/koutu 带水印更换背景颜色 https://www.bgconverter.com/ 光影魔术手,裁剪图片 + 排版,下载经典版 http://www.neoimaging.cn/ 人工智能图片放大...

    更换背景
    免费更换三张,收费还算合理
    https://www.gaoding.com/koutu
    在这里插入图片描述
    带水印更换背景颜色
    https://www.bgconverter.com/

    在这里插入图片描述

    光影魔术手,裁剪图片 + 排版,下载经典版
    http://www.neoimaging.cn/
    在这里插入图片描述

    人工智能图片放大,可免费体验
    https://bigjpg.com/
    在这里插入图片描述

    展开全文
  • Eclipse背景颜色修改

    2019-03-27 11:28:10
    本文属转载文章,原出处请查看下方 ...对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些。设置方法如下: 1、打开window->Preference,弹出P...

    本文属转载文章,原出处请查看下方
    原文:http://blog.csdn.net/songxingfeng/article/details/7790582

    Eclipse背景颜色修改:

    操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些。设置方法如下:
    1、打开window->Preference,弹出Preference面板
    2、展开General标签,选中Editors选项,展开。
    3、选中 Test Editors,右边出现Test Editors面板。 面板中有这样一个选项:Appearance color options; 其中是各种板块颜色的设置,其中有一项是background color,根据自己的喜好选择颜色。
    4、 选中background color,勾掉System Default,点击’color’,弹出颜色选择面板,选择喜好的颜色,单击确定。
    5、返回Test Editors,单击Apply即可。展开Test Editors,还有其他选项,比如对错误提示的颜色样式,如果你对此感兴趣也可尝试更改一下。

    背景颜色向你推荐:色调:85。饱和度:1 2 3。亮度:2 0 5
    文档都不再是刺眼的白底黑字,而是非常柔和的豆沙绿色,这个色调是眼科专家配置的,长时间使用会很有效的缓解眼睛疲劳保护眼睛。
    改变背景颜色
    windows->Preferences->General->Editor->Text Editors
    右边选择Appearance color options
    选Background color 选择背景颜色
    选Current line highlight 来改变 当前选中行 的颜色
    配色方案详细following:

    Eclipse字体大小调整:
    窗口(Window)-首选项(Preferences)-常规(General)-外观(Appearence)-颜色与字体(Colors And Fonts),在右边的对话框里选择Java - Java Editor Text Font,点击出现的修改(Change)按钮,可以设置显示在在主窗体中程序的字体大小,设置完之后点击右下角的应用(Apply),最后点击确定(OK)即可。

    xml的字体大小调整:
    window–preferences–General–appearance–colors and fonts–Basic-- "Text font "
    然后点change,可以设置字体的大小

    eclipse 改变颜色,背景

    一款看上去十分舒服的代码配色,会让Coding过程变得惬意,让编写效率提升不少。而Eclipse默认的代码配色实在丑陋,除了关键字为褐色加粗、字符串为蓝色外,其余颜色均为黑色。在这样的配色中,最难分辨的就是局部变量和类型的私有字段(其他好歹可以通过大小写规则来判断,如果代码编写够规范的话)。而且过于单调的颜色,不容易刺激视觉神经乃至中枢神经,会增加疲劳感,带来困意。
    为了改变这一现状,我们必须对Eclipse的代码配色进行更改。

    我的代码颜色

    改变字体颜色
    windows->Preferences->Java->Editor->Syntax Coloring
    右边选择Java 然后可以自由选择颜色了

    Annotations(注释): 107, 147, 186 浅蓝色
    Deprecated members(不建议使用的成员): 0, 0, 0
    Fields(字段): 128, 0, 128 紫色
    KeyWord ‘return’(关键字’return’): 255, 0, 0 红色
    Keyword excluding ‘return’(除了关键字以外的return): 255, 128 ,0 橙色
    Local variable declarations(局部变量声明): 128, 128, 128 灰色
    Method declarations(方法声明): 255, 128, 64 橙色
    Method(方法): 0, 48, 96 暗浅蓝色
    Operators and brackets(运算符与方括号): 255, 128, 0 橙色
    Others(其他): 96 153, 0 深绿色
    Static fields(静态字段): 33, 0, 189 深蓝色
    Static Method invocations(静态方法调用): 77, 166 255 天蓝色

    Strings(字符串): 132, 26, 238 中天蓝色
    Type variables(类型变量): 128, 0, 25 红罗色
    学习从现在开始

    第二方案
    改变背景颜色(黑底背景的设置)
    windows->Preferences->General->Editor->Text Editors
    右边选择Appearance color options
    选Background color 选择背景颜色
    选Current line highlight 来改变 当前选中行 的颜色
    配色方案详细following:
    Annotations(注释): 107, 147, 186
    Deprecated members(不建议使用的成员): 0, 0, 0
    Fields(字段):128,255,0 绿色
    KeyWord ‘return’(关键字’return’): 255, 0, 0 红色
    Keyword excluding ‘return’(除了关键字以外的return): 255,80, 0 深深橘色
    Local variable declarations(局部变量声明): 70,140,179 深蓝色
    Method declarations(方法声明): 247,197,39 淡橘色
    Method(方法): 241,196,54 深淡橘色
    Operators and brackets(运算符与方括号): 255, 128, 0 深橘色
    Others(其他): 126, 202, 0 淡绿色
    Static fields(静态字段): 128,255,0 绿色
    Static Method invocations(静态方法调用): 77, 166 255
    Strings(字符串): 89,196,196 墨蓝色
    Type variables(类型变量): 222, 0, 25 红色

    展开全文
  • HTML与CSS学习 demo5

    2020-02-12 11:57:11
    这篇笔记主要讲了CSS快捷键的使用方法,复合选择器,块元素,行内元素,CSS背景,CSS层叠性、继承性和优先级 这篇笔记是初学者写下的笔记,如有错误,欢迎前来指正。 Emmet语法(快捷键) 快速生成HTML结构语法 ...

    HTML与CSS学习

    这篇笔记主要讲了CSS快捷键的使用方法,复合选择器,块元素,行内元素,CSS背景,CSS层叠性、继承性和优先级
    这篇笔记是初学者写下的笔记,如有错误,欢迎前来指正。

    Emmet语法(快捷键)

    快速生成HTML结构语法

    • 生成多个相同标签,标签名*3 (注,中间不要有空格)

    • 父子级标签 例:ul和li 可以写 ul>li

      • 兄弟关系用+
    • 可以直接 .nav ,生成<div class="nav"></div>

      • .可以换# 生成id标签
      • 可以更换其他标签,例:p.one 生成<p class="one"></p>
    • 生成类名有顺序 .demo$*5

      • 注:$从1开始排序
    • 生成标签内容带默认文字 例:div{默认文字}

    示例:5个div标签,里面从1到5,属性class从demo1到demo5

    .demo${$}*5
    

    快速生成CSS样式语法

    • tac可以快速生成test-align: center;
    • 基本上都是首字母+参数

    快速格式化代码

    • 快捷键Shift+Alt+f

    • 为了方便操作,在保存时自动格式化代码 (VScode)

      1. 文件->首选项->设置
      2. 搜索emmet.include
      3. 在setting.json的用户下添加下列语句
      "editor.formatOnType":true,
      "editor.formatOnSave":true
      

    CSS复合选择器

    • 复合选择器就是基础选择器结合而成的
    • 包括:后代选择器,子选择器,并集选择器,伪类选择器

    后代选择器 ※

    • 又称包含选择器,可以选择父元素里的子元素
    • 例,选择所有ol标签里的li都更改属性
    ol li {
        color: red;
        /* 选择ol里的所有li元素 */
    }
    
    • 中间用空格隔开

    • 更改的是后代的 (只要是后代都可以被选中,无论几代) 样式

    • 对同名标签的区分

      • 对一个标签添加class属性
      • .class属性+后代名
      • 注:中间的过程标签可以省略
        <style>
          .nav li {
              color: pink;
          }
        </style>
        <ul class="nav">
            <li>pink</li>
        </ul>
      

    子选择器

    • 选择离得最近的子元素
    • 元素1>元素2 {样式声明}
        <style>
          ul>li {
              color: pink;
          }
        </style>
        <ul>
            <li><a href="#">会变粉</a></li>
            <li><a href="#">不会变粉</a></li>
        </ul>
    
    • 元素1是父元素,元素2是子元素
    • 只能选择离得最近的子元素(不包括几代之后的元素)

    并集选择器 ※

    • 可以选择多组标签,样式相同,来集体声明
    <style>
      div,
      p {
          color: pink;
      }
    </style>
    <div>会变粉</div>
    <p>会变粉</p>
    
    • 用逗号隔开,逗号可以理解为和的意思

    • 任何样式选择器都可以作为并集选择器的一部分

    • 语法规范:并集选择器的标签要竖着写

    伪类选择器

    • 给选择器添加特殊效果
    • 语法 : + 元素

    链接伪类选择器

    属性 解释
    a:link 选择所有未被访问的链接
    a:visited 选择所有已被访问的链接
    a:hover 选择鼠标指针位于其上链接
    a:active 选择活动链接 (鼠标按下未抬起的链接)

    小知识:未选择链接经常使用的颜色#333

    链接伪类的注意事项

    • 为了确保生效,要按照 link->visited->hover->active 的顺序声明

    • 链接和标题标签一样,都要单独指定样式

    • 开发中经常的写法:

      • 先给a写一个样式
      • 然后在给hover(经过的时候)写一个样式(蓝色+下划线)

    :focus伪类选择器

    • 选取获得焦点 (光标) 的表单元素
    <style>
      input:focus {
          background-color: pink;
          /* 谁获得了光标,就改变谁的背景色 */
      }
    </style>
    <input type="text">
    <input type="text">
    

    CSS元素显示模式

    元素的显示模式

    • 元素 (标签) 以什么方式显示,例如<div>独自占一行
    • 分类:块元素,行内元素

    块元素

    • 包括:<h1>,<p>,<div>,<ul>,<ol>,<li>,其中<div>是最典型的块元素

    • 特点:

      1. 自己独占一行
      2. 可以设置高度宽度及内外边距
      3. 宽度默认和容器(父级宽度)一样宽
      4. 是一个容器及盒子,里面可以放其他元素
    • 注意:文字类的块元素不允许放其他元素,例如<p><h1>

    行内元素(内联元素)

    • 包括:<a>,<strong>,<body>,<em>,<span>...

    • 特点:

      1. 一行可以显示多个行内元素
      2. 直接设置宽度高度设置无效
      3. 默认宽度为内容的宽度
      4. 行内元素,只能容纳文本或行内元素
    • 注意:

      1. 链接里面不能再放链接元素
      2. 特殊链接<a>里面可以放块级元素,但是要给<a>转化一下块级模式 (下面元素模式转换有写)

    行内块元素

    • 特殊元素:<img />,<input />,<td>同时具有块元素和行内元素的特点,称为行内块元素

    • 特点:

      1. 一行可以有多个行内块元素,但中间有空白缝隙
      2. 默认宽度是内容的宽度
      3. 高度,行高,外边距以及内边距都可以控制

    元素总结

    元素名 特点
    块元素 可以指定大小,独占一行
    行内元素 不能指定大小,一行可以放多个
    行内块元素 可以指定大小,一行可以放多个,大小由内容来决定

    元素显示模式的转换

    • 一种元素需要另外一种元素的特性

    • 例如增加a的触发范围 (使一个行内元素有块元素的性质)

    • 在CSS里面添加display: bolck转化块元素:

    <style>
      a {
          width: 150px;
          height: 50px;
          display: block;
          /* 这句话把a标签转化为块元素 */
      }
    </style>
    <a herf="#">我是块元素</a>
    
    • 在CSS里面添加display: inline转化为行内元素
    <style>
      div {
          display: inline;
      }
    </style>
    <div>我是行内元素</div>
    
    • 在CSS里添加display: inline-block转化为行内块元素
    <style>
      span {
          width: 100px;
          height: 30px;
          display: inline-block;
      }
    </style>
    <span>我既可以指定大小,又可以一行放多个</span>
    

    snipaste工具的使用

    • 一个截图工具,兼具取色的功能
    • F1截图,F3置顶,Alt取色

    课堂案例

    • 侧边栏的效果:
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HczfYLVF-1581249072737)(image/xiaomi_drawer.png)]

    • 代码实现在demo5.html

    小知识:在li中垂直居中
    只要行高和盒子高相等,然后就垂直居中了
    代码 line-height: 40px
    行高小于盒子高度,文字会偏上
    行高大于盒子高度,文字则偏下

    CSS的背景

    • 背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定

    背景颜色

    • 定义背景颜色:
    background-color: transparent | color;
    
    • transparent:背景色透明 (默认值)
    • color:颜色

    背景图片

    • 定义背景图片场景:logo,装饰性小图片,超大图片
    • 优点:便于控制位置
    background-image: none | url();
    
    background-image: url();
    /* 不要忘记url() */
    
    • none:无背景图 (默认值)
    • url():使用绝对地址或相对地址指定图片

    背景平铺

    • 定义背景平铺:
    background-repeat: repeat | no-repeat | repeat-x | repeat-y;
    
    • repeat-x:沿x轴平铺(横向)
    • 背景图片在背景颜色之上

    背景图片位置 重要

    • 背景图片位置属性:
    background-position: x y;
    /* 一共两个参数 x 和 y */
    

    参数表:

    参数值 说明
    length(精确位置) 百分数 | 由浮点数值和单位标识符(px)组成的长度值
    position(方位名词) top | center | bottom | left |center | right
    • 方位名词:

      1. 第一个参数是x轴方向,第二个参数是y轴方向
      2. 参数没有顺序
      3. 只声明一个参数,默认另一个为center
    • 背景图片适合超大图片,背景图片适合水平居中

    背景图片精确位置

    • 第一个参数为x坐标,第二个为y坐标
    background-position: 20px 20px;
    
    • 只指定一个值,另一个值默认垂直居中
    • 精确单位(数值)和文字单位可以混合使用,但一定要注意参数顺序

    背景图像固定

    • 把图片固定在网页上,用来做视差滚动
    background-attachment: scroll | fixed;
    
    • scroll:背景图像滚动 (默认值)
    • fixed:背景图像固定

    背景图片复合写法

    • 和字体一样有复合写法,但是背景图片参数没有顺序
    • 下面是推荐书写的顺序:
    • 注意:背景图片地址为:url( )
    background: 背景颜色 | 背景图片地址 | 背景平铺 | 背景图片滚动 | 背景图片位置 ;
    

    背景色半透明

    • 代码示例
    background-color: rgba(0,0,0,0.3);
    
    • a为透明度,取值范围[0,1]
    • 可以省略透明度前面的0,例0.3 -> .3

    CSS三大特性

    层叠性

    • 对同一个选择器选择相同样式不同的参数:
    • 遵循就近原则,谁离标签近就执行哪个样式 (后来者居上),但是不冲突的部分不会被覆盖

    继承性

    • 子标签会继承父标签的某些样式(可以继承的样式text- ,font- ,line- ,color- )
    • 在F12中可以看到inherited from xxx

    行高的继承

    body {
      font: 12px/1.5 "Microsoft YaHei";
      /* 字体大小/行高 字体 */
    }
    
    • 行高可以没有单位
    • 没有单位的意思是当前元素文字大小的1.5倍

    优先级

    • 给同一个元素指定了多个选择器,就会有优先级产生
    • 选择器相同,根据层叠性排序
    • 权重排序:继承或* -> 元素选择器 -> 类选择器,伪类选择器 -> ID选择器 -> 行内样式style="" -> !important重要的
    参数值 权重
    继承或* 0,0,0,0
    元素选择器 0,0,0,1
    类选择器,伪类选择器,子选择器 0,0,1,0
    ID选择器 0,1,0,0
    行内样式style="" 1,0,0,0
    !important重要的 无穷大
    • !important使用方法 (优先级无穷大):
      div {
        color: blue!important;
      }
    
    • a链接浏览器默认指定了一个样式,所以优先级和元素选择器一样(0,0,0,1)

    权重叠加

    • 复合选择器会出现权重叠加的问题
    • 例:
    <style>
      /* ul和li的权重  0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
      ul li {
        color: green;
      }
      /* li的权重  0,0,0,1 */
      li {
        color: blue;
      }
      /* .nav和li的权重  0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
      .nav li {
        color: pink;
      }
    </style>
    <body>
      <ul class="nav">
        <li>我是绿色</li>
      </ul>
    </body>
    
    • 注:权重不会出现进位
    展开全文
  • 背景

    2019-01-20 11:04:52
    背景 背景颜色   我们使用background-color来设置背景颜色,如下: div { width: 200px; height: 300px; background-color: pink; } 背景图片   背景图片的设置使用background-image: url()来...
  • 原文地址:...为了达到这个目的,我们首先需要“学习”背景模型,然后将背景模型和当前图像进行比较,从而得到前景目标。背景建模 背景与前景...
  • 12、背景

    2020-07-05 19:16:07
    背景 背景 一、背景 background-color:背景色 background-img:背景图片 background-repeat:平铺 background-attachment:图像固定 background-size:图像大小 1.1、背景色(background-color) 语法:...
  • 前言:窗口背景无非两种,及背景颜色、背景图片。Qt中窗口背景如何设置?总结以下三种方法。   1、QPalette设置背景 2、实现paintEvent,使用QPainter来绘制背景 3、使用QSS来设置背景 ----------------------...
  • VSCode设置背景图片的两种方式

    千次阅读 2020-04-19 15:44:09
    1.可以通过直接修改VSCode的css代码来设置 2.可以通过下载插件来设置 ... /*背景图片的路径*/ background-image: url(C:/Users/Lenovo/Desktop/壁纸/15.jpg); /* 图片不重复 */ background-repeat: n...
  • css去掉背景颜色

    万次阅读 2017-09-21 17:21:23
    只需要在已经设置好背影颜色的代码上加上 background-color:transparent; 就解决了!
  • Pycharm如何设置自定义背景颜色

    万次阅读 2016-08-26 17:24:37
    Pycharm可以通过设置主题来设定背景颜色,但主题的背景颜色也仅仅局限特定的几种,通过如下的方式可以自定义背景颜色。 File——Settings——Editor——General——(右侧上方的框框)Text——Default text——选右侧...
  • 背景图片不重复不平铺,可以这样设定背景: 1、 这样背景图片就会固定住,不会因页面滚动而重复。 2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺):
  • html+CSS让背景图片充满整个屏幕

    万次阅读 多人点赞 2017-10-19 14:02:34
    由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕。   给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。 其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态...
  • Android TextView边框和背景,以及圆形背景

    万次阅读 多人点赞 2020-06-12 10:24:28
    Android TextView边框和背景,以及圆形背景
  • html中如何设置背景背景颜色的透明度
  • Html 设置整个页面的背景颜色

    万次阅读 2018-01-12 10:19:30
    在index.css中添加 body{ background:#ffffff} 设置颜色为白色也就是给index.html设置了body的颜色,然后就可以看到整个html页面的颜色就成了白色。
  • body{ background-image: url(img/bg.jpg); background-size:cover; }
  • 微信小程序——View背景设置

    万次阅读 2016-12-16 11:38:31
    微信小程序的的view背景可以通过本地和网络两种方式: 网络: background-image: url('http://img6.bdstatic.com/img/image/smallpic/PPT1215.jpg'); 本地: background-image: url('../../imgs/kejian.png');
  • css使背景图片旋转

    万次阅读 2014-05-02 11:10:07
    因为遇到问题所以去查找问题,css3
  • 几种比较和谐的文字背景颜色搭配

    万次阅读 2006-01-14 18:03:00
    1背景色:#F1FAFA″———做正文的背景色好,淡雅 A2背景色:#E8FFE8″———做标题的背景色较好 A3背景色:#E8E8FF″———做正文的背景色较好,文字颜色配黑色 A4背景色:#8080C0″———上配黄色白色文字较好...
1 2 3 4 5 ... 20
收藏数 1,355,421
精华内容 542,168
关键字:

背景