精华内容
下载资源
问答
  • CSS 背景

    千次阅读 2021-03-23 14:52:06
    CSS 背景 文章目录CSS 背景不透明度解决方案 CSS 背景属性用于定义元素的背景效果 CSS 背景属性: background-color background-image background-repeat background-attachment background-position 这里没有...

    CSS 背景

    在这里插入图片描述

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

    CSS 背景属性:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    在这里插入图片描述
    在这里插入图片描述

    这里没有用style,而是放在style的标签中!

    不透明度

    在这里插入图片描述

    注意:使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

    解决方案

    在这里插入图片描述

    展开全文
  • CSS背景

    千次阅读 热门讨论 2021-04-10 20:42:55
    CSS背景背景颜色背景图片位置背景色半透明 背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...

    背景颜色

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>背景颜色</title>
        <style>
          div {
            width: 200px;
            height: 200px;
            /* 背景颜色 */
            /* background-color: blue; 
             transparent是默认值 透明的 */
    
            /* 背景图片 */
            /* background-image: url(); 
              url() 括号里面填写图片地址
              默认none没有背景图片*/
    
            /* 背景不平铺 */
            /* background-repeat: no-repeat; */
            /* 默认背景平铺 */
            /* 沿着X轴/Y轴平铺 */
            /* background-repeat: repeat-x;
            background-repeat: repeat-y; */
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>
    
    

    背景图片位置

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>背景图片位置</title>
        <style>
          h3 {
            width: 200px;
            height: 50px;
            background-image: url(./csdn.png);
            background-repeat: no-repeat;
            /* 背景图片位置 */
            /* 背景位置方位名词 */
            background-position: center left;
            /* 方位名词部分顺序,只写一个另一个默认居中 */
            /* background-position: 20px 30px; */
            /* 精确位置第一个是X轴第二个是Y轴 */
    
            /* 背景图像固固定 */
            /* background-attachment: fixed; */
            /* 默认scroll 背景图片跟随对象内容滚动 */
    
            /* 背景复合性写法 */
            /* background: transparent url() repeat fixed top;
            color image repeat fixed position
            颜色    图片  平铺    滚动   位置 */
    
            text-indent: 10em;
            line-height: 50px;
            font-size: 20px;
          }
        </style>
      </head>
      <body>
        <h3>csdn</h3>
      </body>
    </html>
    
    

    背景色半透明

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>背景色半透明</title>
        <style>
          div {
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.5);
            /* 0.5代表透明度是50% */
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>
    
    

    背景图片大小

    (1)宽高百分比充满容器(图片很可能变形)

    background-size: 100% 100%;
    

    (2)给图片设置固定的宽高(也有可能会变形)

    background-size: 100px 100px;
    

    (3)等比缩放图片,全部填满容器为止,宽或高可能会溢出容器

    background-size: cover;
    

    (4)等比缩放图片,当宽高其中任意一个填满容器为止,可能会填充不满容器

    background-size: contain;
    

    在这里插入图片描述
    ps:图片来自黑马程序员

    展开全文
  • Css背景

    千次阅读 2016-04-27 16:45:16
    Css背景 1.背景图像:background-image 要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。 如果需要设置一个背景图像,必须为这个...

    Css背景



    1.背景图像:background-image

    要把图像放入背景,需要使用background-image 属性background-image属性的默认值是 none,表示背景上没有放置任何图像。

    如果需要设置一个背景图像,必须为这个属性设置一个 URL值:

    body {background-image: url(/i/eg_bg_04.gif);}

    大多数背景都应用到 body 元素,不过并不仅限于此。

    下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:

    p.flower {background-image: url(/i/eg_bg_03.gif);}

    您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:

    a.radio {background-image: url(/i/eg_bg_07.gif);}

    如需查看上述例子的效果,可以亲自试一试

    理论上讲,甚至可以向 textareas select 等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。

    另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承。


    2.关键字

    关键字比如:topbottomleftright、和center

    关键字可以按任何顺序出现,不过不能超过两个关键字:一个水平方向,一个竖直方向。

    如果只出现一个关键字,那么另一个就为center


    3.百分数值

    百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:

    body

      { 

        background-image:url(‘/i/eg_bg_03.gif’);

        background-repeat:no-repeat;

        background-position:50% 50%;

      }

    这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50%的点(中心点)与元素中描述为 50% 50%的点(中心点)对齐。

    如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

    因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3处,可以这样声明:

    body

      { 

        background-image:url(‘/i/eg_bg_03.gif’);

        background-repeat:no-repeat;

        background-position:66% 33%;

      }

    如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。

    background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。


    4.长度值

    长度值的解释是元素内边距区左上角的偏移。偏移点是图像的左上角。





    展开全文
  • CSS 背景图像

    千次阅读 2021-03-23 14:58:12
    CSS 背景图像 文章目录CSS 背景图像CSS 背景图像还可以为特定元素设置背景图像 CSS 背景图像 CSS 背景图像 background-image 属性指定用作元素背景的图像。 默认情况下,图像会重复,以覆盖整个元素。 还可以...

    CSS 背景图像

    在这里插入图片描述

    CSS 背景图像

    在这里插入图片描述

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

    默认情况下,图像会重复,以覆盖整个元素。

    还可以为特定元素设置背景图像

    例如 < p> 元素:

    在这里插入图片描述

    展开全文
  • CSS 背景重复

    千次阅读 2021-03-25 17:36:59
    CSS 背景重复 文章目录CSS 背景重复 CSS background-repeat 默认情况下,background-image 属性在水平和垂直方向上都重复图像。 某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示: <...
  • CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: background-image:url("图片路径") 小技巧:提倡背景图片后边的地址,...
  • css背景样式 css背景样式 序号中文说明标记语法1背景颜色{background-color:数值}2背景图片{background-image: url
  • 通过CSS背景属性,可以给页面元素添加背景样式。 背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。 1、背景颜色 background-color属性定义元素背景颜色。 background-color: 颜色值; ...
  • CSS 背景(background)+背景透明(CSS3)

    万次阅读 2019-06-06 11:21:56
    CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 ...
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...
  • CSS背景控制--背景色

    千次阅读 2019-06-11 09:49:37
    CSS背景控制--背景色1、背景颜色---英文单词2、背景颜色---16进制颜色3、背景颜色---rgb颜色4、背景色的透明度5、背景的线性渐变6、背景的怪向渐变 背景颜色的设置方法有三种:颜色的英文单词、16进制颜色、rgb颜色...
  • CSS——CSS 背景应用

    千次阅读 2020-06-29 20:41:13
    文章目录基本属性背景图片(image)背景平铺(repeat)背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例 基本属性 CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color 背景...
  • CSS背景缩写、简写详细

    千次阅读 多人点赞 2020-08-23 21:18:26
    CSS背景缩写、简写 不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来 背景共有8个属性: background-color    背景颜色 background-position    背景图像的位置 background-size  ...
  • css背景图片的滚动属性 描述 (Description) This property sets the background image of an element via the specified URI. The image is placed on top of the background-color, and if the image is opaque, ...
  • css背景和边框标签总结

    千次阅读 2021-04-23 18:17:28
    一、css背景标签 1,设置背景颜色 back-ground-color 属性指定元素的背景色。 小实例如下图所示: 运行结果如下: 可以通过选择器给不同的标签设置不同的颜色,在这里h1,div,和p标签将拥有不同的背景色: 实例: ...
  • css背景渐变(动画)

    千次阅读 2019-10-31 14:24:07
    css背景渐变(动画) // css背景渐变(动画) .writeFarming{ background: linear-gradient(-45deg, #2d8cf0, #19be6b, #ff9900, #ed3f14); animation: gradientBG 15s ease infinite; background-size: 400...
  • CSS背景属性background详解

    千次阅读 2016-08-06 22:07:00
    转载来自:https://paran.io/css-background-attribute/ ...本文详解了CSS背景属性Background,包括CSS3中新增的背景属性。如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性...
  • 前端CSS背景图片添加不上,背景颜色可以,不知道哪里出现问题了,请大神指教一下,本人初学者![图片说明](https://img-ask.csdn.net/upload/202004/07/1586256619_845696.png)
  • CSS背景颜色设置 background-color:red;如设置背景颜色为红色; 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS...
  • 前端基础学习入门教程之CSS背景

    千次阅读 2020-02-15 19:27:35
    CSS背景 - background 属性 CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。 具体参数值在下面 一 一介绍 CSS背景 - background-attachment 属性 ...
  • css背景透明

    万次阅读 2019-04-15 17:35:00
    css设置div背景透明有两种方法:第一种使用opacity:0~1,这个方法有个缺点,就是内容也会跟着透明;第二种方法就是background-color:rgba(0,0,0,0~1),使用这个方法就只会设置div背景透明,而不会影响到div里的内容...
  • CSS背景图片路径设置

    千次阅读 2016-07-07 17:07:04
    CSS背景图片路径设置 博客分类:  Css相关   Java代码  /**  在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。  css中加背景图片根据图片及css...
  • CSS 背景设置渐变色

    2018-12-25 17:15:33
    CSS 背景设置渐变色 .left-box{ background: linear-gradient(to right, #738393, #37434f); margin-right: 5px; } .right-box{ background: linear-gradient(to right, #5882aa, #1c3b6a); margin-lef...
  • 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背景色渐变与文字渐变效果的实现(代码实例),介绍css 渐变样式和如何实现css渐变。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。   一、css 背景色渐变 样式 1. css 线性背景渐变样式 ...
  • CSS背景属性Background详解  本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性。如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。  css2 中的背景(background)  CSS2...
  • css背景颜色占满全屏幕: div{ position: absolute; height: 100%; width: 100%; background: red; top:0; left: 0; overflow-y: auto; }```
  • CSS 背景图片水平平铺

    千次阅读 2016-12-08 19:43:58
    CSS 背景图片水平平铺   美工切的细长的图,水平平铺作为背景 body { margin: 0; background:url("&lt;%=basePath%&gt;/static/images/background.png") repeat-x 0 0; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,336
精华内容 16,134
关键字:

css背景