html的css背景图的repeat

HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的div是平铺的,但是没有设置repeat值,默认就平铺了,默认就是横向纵向都是平铺的,不需要特别设置.background-repeat通过设置为其他值,可以只横向平铺,或纵向平铺,或不平铺:no-repeat:不平铺,背景图只显示一次repeat-x:沿着x轴横向平铺repeat-y:沿着y轴纵向平铺…

css背景图与html插入img的区别

一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在.而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载. 附:在一个单纯由Html和Css组成的页面中,背景图片总是最后加载的,那么假若我们想…

Lodop打印控件不打印css背景图怎么办

background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法输出背景图,在超文本中也可以用普通图片利用层级关系作为背景图输出,img图片设置样式z-index为负值(例如style='z-index: -1;).其他背景图及输出方法,可参考本博客其他博文. Lodop打印html超文本可以输出css背景色,但是不能输出背景图,见图一: 通过设置img图片设置…

vue的挖坑和爬坑之css背景图样式终极解决方法

原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.vue文件中的CSS样式中,使用背景图在webpack打包后,路径不对,怎么办呢? 回答如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../' 解释…

vue cli 打包项目造成css背景图路径错误

vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:…

css背景图等比例缩放，盒子随背景图等比例缩放

很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤.这用css竟然也是可以实现的,瞬间感觉自己的css弱爆了,下面是我写的小demo,我想在响应式的网站上,这个用途还是很广的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT…

vue项目打包后css背景图路径不对的问题

问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图.如下两张图对比图一:使用npm run dev命令访问图二:使用npm run build命令打包之后,访问dist目录下的文件,出现的问题,背景图片路径变成了http://127.0…

CSS背景图拉伸自适应尺寸，全浏览器兼容

突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云.... 对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下.....但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法: .bg{ background:url(http://wyz.67ge.com/…

css背景图撑开盒子高度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图撑开盒子高度</title> <style> .bg-box { background-image: url(../demo.jpg); background-size: 100% 100%; background-repeat: no-r…

css背景图充满屏幕

代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repeat; /* 背景图垂直.水平均居中 */ background-position: center center; /*这个应该是为了IE浏览器,没深究*/filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=…

vue webpack 打包后css背景图路径问题

最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微查了一些资料,发现是webpack自身问题.在webpack中,js和css引入资源的路径是不一样的,js是以调用的位置决定的,而css是以自身的位置决定的,这就导致了css的资源多套了一到多层. 在vue项目中,解决方法也炒鸡简单,只需改一下配置即可: //build/utils.js if (o…

CSS背景图怎么自适应全屏（手机或者电脑）

#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) background-size:cover; --(2)将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内. background-size:contain; --(3)最简单粗暴的方法,缺点会给背景拉伸变形; background-size:100% 100%: }…

css背景图自适应全屏显示

前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之后完美显示,依照大神所说还"不失真"(虽然我不管失不失真). 笔记如下: body{ margin: 0; padding: 0; font-family: sans-serif; background: url(../img/bg.jpg) no-repeat center 0px; b…

css背景图自适应

在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: url(./image/img.jpg) no-repeat 0px 0px; background-size: cover; background-attachment: fixed;…

css背景图定位和浮动

网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片 background-image: url(图片地址)不平铺 background-repeat: no-repeat; 固定图片位置,随着滚轮滑动而不变 background-attachment: fixed; 图片定位 background-position: 上右下左; 超链接:a 取消下划线 text-decorati…

CSS背景图拉伸不变形

在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size…

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽度: 改变浏览器窗口的大小,小于内容层宽度,如下图所示. 拖动水平滚动条,出现了bug的样子.右边的背景不存在了.如下图所示. 问题的根本在于:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度.而忽略了下部内容层固定宽度(960px).从而出现了固定宽度大于100%宽度的现象.浏览以此理解来解…

vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,webpack调用ExtractTextPlugin后生成的代码中,将没办法获取到正确的图片url,因为图片都被打包到静态文件中去了. 解决方法: 在build/util.js中配置publicPath:"../../", 这样可以修正静态资源的url if (options.extract…

CSS背景图拉伸自适应尺寸

.bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%; }…

css背景图宽度只适应，高度不变

保证1920px的图片,在低分率率的电脑上也能正常显示,两边裁剪,中间居中,高度不变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="test"> <div…

纯css背景图自适应

只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系…

css 背景图居中

参考:http://www.php.cn/css-tutorial-411901.html position : 50% ;或position : center;…

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-…

使用Canvas绘制背景图

原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS7一致了.首页图标下方漂浮着若干大小不一的泡泡,十分梦幻.大家可以访问 beta.icloud.com 体验下,如果觉得泡泡不够多,还可以加上 crazyAwesome 参数让泡泡变得更加疯狂. 上面提到的泡泡效果,有许多种实现方案.本文要讨论的是iCloud使用的Canvas绘制背景图方案.这样做…

CSS背景100%平铺浏览器缩小背景显示不全解决办法

本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大. 解决方法: width:100%;min-width:990px; 在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度. Ps: 逐风个人认为上诉的解决方案还不够人性化, 想要实现不同分辨率下灵活覆盖,逐风推荐…

CSS背景background图片

一.CSS背景background图片 - TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图片是否重复平铺background-position:left top 设置图片的css背景定位,left代表靠左,top代表靠上简写背景图片语法:background:url(图片地址) no-repeat left top 2.背景图片设置Body{background:url(http://…

css 背景(background)属性、背景图定位

background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: (1)background-color 设置背景颜色 (2)background-image 设置背景图片地址 (3)background-repeat 设置背景图片如何重复平铺 (4)background-position 设置背景图片的位置 (5)background-attachment 设…

DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层嵌套原理: ①要做成这个效果,用ps软件抠出这一栏目 ②继续抠图,截出三张这一的小图标,高度务必一样的大小,才能平铺的时候一样高度,中间的图片一个像素就够了. …

在css中设置图片的背景图，怎么设置图片纵向拉伸

css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景. css3出现以后,可以用background-size 属性来实现背景图拉伸填充. 而且这个属性在firefox,chrome,以及ie9上都可…

【html的css背景图的repeat】的更多相关文章