精华内容
下载资源
问答
  • css 背景图片

    2013-05-22 14:19:30
    css 背景图片
  • css 背景图片自适应属性整理

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

    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

    背景图片取消重复

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    

    修改前
    背景图片取消重复
    修改后
    背景图片取消重复

    背景图片固定(不会随着内容滚动而改变位置)

    background-image: url(image.jpg);
    background-attachment:fixed;
    

    背景图片居中显示

    垂直水平居中

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    

    背景图片居中显示
    水平方向居中 垂直方向向上

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    

    在这里插入图片描述
    水平方向向右 垂直方向向下

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:right bottom;
    

    在这里插入图片描述

    背景图片等比例拉伸

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: auto 100%;
    /* background-size: 100% auto; */
    

    背景图片等比例拉伸
    或根据高度进行拉伸
    背景图片等比例拉伸
    还可以使用 cover 自动等比例拉伸图片

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    

    背景图片等比例拉伸

    背景图片拉伸(会扭曲图片)

    background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    

    背景图片拉伸(会扭曲图片)

    展开全文
  • CSS样式图片下载助手,css背景图片下载 可以下载css里面定义的所有图片
  • 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背景图片的滚动属性

    描述 (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, the background-color will not be visible beneath it. When you’re setting a background-image, also set a background-color, where possible, in case the image is unavailable.

    此属性通过指定的URI设置元素的背景图像。 图像放置在background-color顶部,如果图像不透明,则在其下方将看不到background-color 。 设置背景图像时,请在可能的情况下还设置background-color ,以防图像不可用。

    The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

    元素的背景是该元素的宽度和高度覆盖的区域(无论这些尺寸是明确设置的,还是内容决定了它们的大小); 它还包括填充和边框所覆盖的区域。 应用于元素的background-color (或background-image )将出现在该元素的前景内容之下,以及该元素的paddingborder属性覆盖的区域。 该覆盖区域很明显,其中元素具有transparent (或dotteddashed )边框,并且在边框下方(或点之间)可以看到背景。 请注意,Internet Explorer 6或以下版本不支持transparent边框。

    Some area of the element in question must be visible so that the background-image can show through. If the element has no intrinsic height (either defined by its content or dimensions), the background won’t have any space in which to display. If an element contains only floated children which haven’t been cleared—see clear—again, the background won’t display, since the element’s height will be zero.

    所讨论元素的某些区域必须可见,这样background-image才能显示出来。 如果元素没有固有高度(由其内容或尺寸定义),则背景将没有显示空间。 如果某个元素仅包含尚未清除的浮动子元素(请参见clear),则背景将不会显示,因为该元素的高度将为零。

    By default, the background-image is placed at the top-left (background-position) of the element; it’s repeated along the x and y axes (background-repeat) and will scroll with the document. These are the default settings that apply if you haven’t explicitly set any others, and can be adjusted with the other background properties. Refer to the other relevant stuff below for methods you can use to position and control the image.

    默认情况下,背景图像位于元素的左上角(背景位置); 沿xybackground-repeat ( background-repeat ),并将与文档一起滚动。 这些是默认设置,如果您未明确设置任何其他设置,则可以使用这些默认设置,并且可以使用其他背景属性进行调整。 请参阅下面的其他相关材料,以获取可用于定位和控制图像的方法。

    (Example)

    This style rule assigns a background image to the element with ID "example" :

    此样式规则将背景图像分配给ID为"example"的元素:

    #example {
      background-image:
      ➥    url(images/bg.gif);
    }

    (Value)

    A URI value specifies a location at which the image can be found.

    URI值指定可以找到图像的位置。

    The value none ensures that no background-image will be displayed; this is the default setting, so you don’t need to define it explicitly unless you want to override previous background-image declarations.

    值none确保不会显示背景图片; 这是默认设置,因此除非您要覆盖以前的background-image声明,否则无需显式定义它。

    The value inherit would cause the element to inherit the background-image of its parent. This approach would not normally be taken, as the element’s inherited background image would most likely overlap the parent’s image. In most cases, the parent’s background-image will be visible through the element’s transparent background unless another background-image or background-color has been set.

    值继承将使元素继承其父元素的background-image 。 通常不会采用这种方法,因为元素的继承背景图像很可能会重叠父对象的图像。 在大多数情况下,除非已设置其他background-imagebackground-color否则父元素的背景图像将通过元素的透明背景可见。

    翻译自: https://www.sitepoint.com/background-image-css-property/

    css背景图片的滚动属性

    展开全文
  • 前端CSS背景图片添加不上,背景颜色可以,不知道哪里出现问题了,请大神指教一下,本人初学者![图片说明](https://img-ask.csdn.net/upload/202004/07/1586256619_845696.png)
  • 那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现...
  • CSS背景图片中使用SVG的优点 在CSS背景图片中使用SVG,可以使用css background属性的诸多特性,比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片...

    在CSS背景图片中使用SVG的优点


    在CSS背景图片中使用SVG,可以使用css background属性的诸多特性,比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸,还有一个好处就是可以不用把SVG图片插入到html中,从而保持html的整洁。

    在CSS背景图片中使用SVG,有很多的优点,对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG,有什么方法来改变它的颜色呢?接着看。

     

    CSS mask


    使用CSS中mask来改变背景颜色,这个方法简单实用,重要的是现在浏览器对它的支持越来越好。mask属性可以用来根据元素的轮廓来创建一个遮罩,使用遮罩可以只显示指定图片内容的区域,而图片区域以外的则是隐藏的。下面是它的使用方法:

    .icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
    }

    mask还有很多的属性,比如mask-position、mask-repeat和mask-size,它们跟CSS中背景图片的对应属性的使用方法都差不多,也可以像background一样来使用简写语法:

     

    .icon {
    background-color: red;
    -webkit-mask: url(icon.svg) no-repeat 50% 50%;
    mask: url(icon.svg) no-repeat 50% 50%;
    }


    浏览器对mask的支持也越来越好。可以通过下面的地址来看看各个浏览器对它的支持情况:

    https://caniuse.com/#search=mask-image

     

    另外如果不限于在css中修改的话,可以直接修改svg源文件

    把svg图片拖到编辑器里可以看到svg源代码

    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540202401705" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.374 707.763C95.265 506.544 42.467 264.487 159.2 156.707c25.227-23.275 56.897-38.54 93.597-45.297 2.592-1.037 5.277-1.942 8.07-2.655 0.198-0.045 1.495-0.365 1.68-0.408 59.18-13.637 130.407 48.272 165.687 144.012 23.017 62.442 24.332 123.377 3.53 163.005-11.057 21.047-27.832 34.98-48.965 40.377-0.02 0.003-2.212 1.172-2.77 2.32-0.783 1.592-0.962 6.665 2.945 15.852 19.252 27.482 40.742 54.21 63.895 79.52 25.195 27.52 52.245 53.215 80.43 76.365 0.31 0.215 0.61 0.415 0.905 0.605 4.695 3.365 7.18 2.79 8.37 2.515 4.165-0.96 8.635-4.73 11.22-7.415 9.725-22.71 30.73-38.74 59.715-45.42 38.985-8.985 89.81-0.715 139.445 22.675 91.08 42.95 141.545 117.275 125.25 175.335-1.455 5.185-1.59 5.735-3.045 10.795-12.07 32.925-28.38 62.875-52.92 85.53-22.97 21.21-51.175 35.765-83.845 43.29l0.01 0C603.518 947.402 421.466 863.038 279.374 707.763zM593.493 646.688c-0.81 2.37-1.985 4.605-3.45 6.62-1.695 2.335-17.295 22.88-42.175 28.61-15.69 3.62-31.43 0.69-45.74-8.44-1.533-0.8-3-1.76-4.372-2.875-30.892-25.18-60.482-53.175-87.98-83.22-25.205-27.545-48.562-56.715-69.445-86.67-0.858-1.237-1.603-2.547-2.223-3.902-10.597-23.097-11.705-43.572-3.283-60.812 11.04-22.607 33.825-28.61 35.955-29.1 2.455-0.63 9.96-2.538 16.465-14.92 13.862-26.42 11.43-74.4-6.2-122.215-26.652-72.335-78.575-119.007-107.682-112.3-1.145 0.31-2.235 0.76-3.292 1.245-1.905 0.835-3.908 1.427-5.962 1.795-28.062 4.72-52.137 15.965-70.785 33.152-92.912 85.777-36.505 305.654 123.165 480.141 128.205 140.11 294.584 220.249 404.619 194.895 24.03-5.535 44.56-16.025 61.01-31.225 18.15-16.77 32.815-41.595 40.6-66.98 0.66-2.145 1.52-4.81 2.645-9 7.385-27.38-31.775-81.15-99.855-113.23-39.045-18.405-78.925-25.57-106.715-19.17C609.268 631.288 597.133 636.113 593.493 646.688zM653.488 446.834c-14.005 0.62-25.87-10.2-26.49-24.205-0.46-10.005-4.775-19.232-12.165-25.96-7.385-6.755-16.96-10.222-26.96-9.772-13.995 0.645-25.865-10.195-26.495-24.2-0.64-14.005 10.175-25.857 24.195-26.505 23.545-1.075 46.09 7.105 63.49 22.987 17.395 15.902 27.565 37.622 28.63 61.155 0.56 12.43-7.91 23.19-19.62 25.885C656.598 446.559 655.053 446.761 653.488 446.834zM736.648 425.799c-14 0.643-25.87-10.195-26.505-24.205-2.59-57.415-51.405-102.017-108.83-99.427-13.985 0.642-25.86-10.202-26.485-24.185-0.635-14.002 10.245-25.867 24.205-26.502 85.375-3.865 157.965 62.455 161.81 147.842 0.57 12.425-7.905 23.162-19.615 25.86C739.753 425.524 738.208 425.726 736.648 425.799zM838.598 430.764c-14.01 0.62-25.865-10.225-26.5-24.21-2.6-57.475-27.425-110.5-69.9-149.322-42.48-38.8-97.53-58.742-155-56.137-14.005 0.62-25.87-10.2-26.5-24.205-0.625-14.007 10.23-25.865 24.2-26.5 71.025-3.21 139.045 21.425 191.529 69.377 52.495 47.947 83.165 113.467 86.37 184.492 0.555 12.432-7.915 23.17-19.62 25.867C841.693 430.466 840.168 430.686 838.598 430.764z" p-id="10045" fill="red"></path></svg>

    直接找到里面的 fill 属性修改里面的色值就行了

    展开全文
  • 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 XML/HTML代码 ...
  • CSS背景图片路径设置

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

    CSS背景图片路径设置

     
    Java代码   收藏代码
    1. /** 
    2. 在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。 
    3. css中加背景图片根据图片及css文件的相对位置分一下几种类型: 
    4. 1.同包下:background : url(aaa.gif); 
    5. 2.不同包: 
    6.     在这种情况下有2中方法可以设置,一种是使用绝对路径,即http://www.iteye.com/aaa.gif这种,不过一般不推荐这么用,不利于项目移植;一种是使用相对路径,首先需要找到图片文件和css文件共同的一个根目录,然后再加上图片的子目录,比如: 
    7.     css文件位置:WebRoot/test/css/a.css 
    8.     图片文件位置:WebRoot/platform/resource/images/icons/a.gif 
    9. 想要找到共同的根目录就需要用到 "../" 这个路径的意思是上一级目录,如果是两层上级目录,就是 "../../" 那么,按照这种写法的话,a.css中得背景图片css应该这么写: 
    10.     background:url(../../platform/resource/images/icons/a.gif) 
    11. 为什么呢? 
    12.   首先,我们观察这两个文件的位置,可以发现,共同的根目录是WebRoot, 
    13. 我们首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接图片的子目录的路径 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的结果了。 
    14. **/  
    展开全文
  • CSS 背景图片水平平铺

    千次阅读 2016-12-08 19:43:58
    CSS 背景图片水平平铺   美工切的细长的图,水平平铺作为背景 body { margin: 0; background:url("&lt;%=basePath%&gt;/static/images/background.png") repeat-x 0 0; }
  • 在vue组件的style标签内部有如下一段使用背景图片css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__...
  • css背景图片全屏显示加居中显示

    千次阅读 2017-05-24 15:38:22
    css背景图片全屏显示加居中显示,屏幕过大平铺 屏幕过小居中裁剪
  • 接下来本篇文章将给大家来介绍关于css背景图片平铺的方法,有需要的朋友可以参考一下。 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新) 我们首先来看一下css设置...
  • CSS背景图片页面自适应充满屏幕】 实现代码: body {  overflow: hidden;  position: fixed;  width:100%;  height:100%;
  • 关于css背景图片平铺问题

    千次阅读 2018-03-16 15:44:04
    众所周知,CSS背景图片平铺有个最直接的办法就是利用backgroud-size:cover,但是在body的height未达到100%的情况下底部是会留白的,此时有个解决方法:&lt;img sc='xxxx' class='back-img'/&gt;.back-img{ z...
  • css背景图片绝对路径无法显示问题

    千次阅读 2020-03-26 14:47:31
    css背景图片绝对路径无法显示问题 正常的css引入背景图片就不多说了. 正常代码如下图: 没有毛病,此时,我们的教皇就显示出来了,相对路径引入,但是此时如果用绝对路径。 如下图代码: 页面会空空如也,此时...
  • css背景图片的运用

    千次阅读 2018-08-13 20:00:17
    转自:https://www.w3cplus.com/css/css-background-image-hacks.html 这篇文章是99翻译Nicolas Gallagher的CSS background image ...那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅...
  • css背景图片自动拉伸铺满

    千次阅读 2019-10-01 12:03:31
    .about-us2{ margin-top: 80px; background: #efefef; background-image: url(../images/aboutus2/about_bg.jpg); ... background-size:100%;...css背景图片自动拉伸铺满以上写法就可以实现。 转载于:https://w...
  • CSS背景图片定位

    千次阅读 2018-09-07 16:39:14
    背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上...
  • css背景图片裁剪

    千次阅读 2019-01-08 19:59:24
    先提一下小程序对于背景图片是识别要用http路径去显示 alt + shift + f 格式化小程序代码 裁剪方式 background-clip:border-box;/* 表示从边框向外裁剪背景,border-box是background-clip的默认值 */ background-...
  • CSS背景图片自适应

    千次阅读 2019-06-26 20:26:25
    body{ background-image: url("${re.contextPath}/plugin/pay/img/payResultBg.png"); height: 100%; width: 100%; no-repeat center top; background-size: 100%; ...
  • CSS设置拉伸背景图片铺满屏幕新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕。在test.html文件内,使用div标签创建一个模块,并设置其class属性为myclass,主要用于下面通过该class...
  • Bootstrap css背景图片的设置

    千次阅读 2015-07-29 21:39:00
    一、网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin:0 auto...css背景图片的设置: http://par...
  • 接下来本篇文章将给大家来介绍关于css背景图片平铺的方法,有需要的朋友可以参考一下。 我们首先来看一下css设置背景图片平铺方式。 repeat:即默认方式,完全平铺背景; no-repeat:在X及Y轴方向均不平铺; ...
  • css背景图片固定位置 Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a ...
  • css背景图片的设置

    万次阅读 多人点赞 2018-03-30 10:57:32
    转自:http://www.360doc.com/content/18/0330/10/54030484_741477948.shtmlcss2 中的背景(background)概述CSS2 中有5个主要的背景(background)属性,...* background-image: 引用图片作为背景。* background-posi...
  • 如何让css背景图片占满全部背景,并且保持长宽比呢? body{ background-image: url("<%=basePath%>res/index_head_1.jpg"); background-position: center; background-repeat: no-repeat; ...
  • css背景图片模糊

    千次阅读 2020-01-29 17:50:12
    模糊图片时背景图片,我们以小程序为例,实现上边效果: wxml: 背景图片之所以要写在标签中,可以作为可复用页面,动态切换图片地址。 <view> <view class="bg-img-box"> <view class="bg-img...
  • 一、css背景图片 1、概述  背景是css中一个重要的的部分,也是需要知道的css的基础知识之一。这里主要介绍有关背景图片的5种常见属性,分别是: (1)、background-color: 指定填充背景的颜色。 (2)、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 148,454
精华内容 59,381
关键字:

css背景图片