css 放大背景图尺寸不变

2024-10-11

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/ski

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背

CSS实现背景图尺寸不随浏览器缩放而变化

方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-back

css(html)背景图优化合并

图片本身的优化: 图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量. 当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量. 当图片色彩过于丰富又有透明或半透明要求或阴影效果时,建议采用png24格式,并对IE6进行png8退化(或在不得已情况下使用滤镜). 当图片色彩不太丰富时无论有无透明要求,请采用png8格式,大多数情况下建议采用这种格式. 当图片有动画时,只能使用gif格式. 你可以使用工具对图片进行再次压缩,但前提是不会影响色彩和透明

css固定背景图位置实现屏幕滚动时显示背景图不同区域

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { width: 100%; padding: 50px 0; padding-bottom: 30px; height: auto; } .container.image-containe

css background 背景图设置

css用背景图来替换文字来达到隐藏文字的目的

根据html代码的不同来分成两大类方法,如下 html代码: <h1 class="replace-indent">hello see</h1> 第一种方法:text-indent .replace-indent{ height:200px; width:200px; background:url(); text-indent:-9999px; } 第二种方法: .replace-indent{ height:200px; width:200px; backgr

css 在背景图上加渐变

<html> <head> <title>我的第一个 HTML 页面</title> <style> .banner { width: %; background: linear-gradient(to right bottom,rgba(,,,,,,)),url(.jpg) no-repeat center; height: 300px; color:white; } .center{ width:1200px; margin: auto; }

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

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

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

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

webpack中，css中打包背景图，路径报错

css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]" //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径: //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制

css之背景(background)家族

背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传家族成员背景(background)家族在css2中由5个主要的背景属性组成,分别是: background-color 指定填充的背景颜色 background-image 引用图片作为背景图 background-position 指定元素背景图片的位置 background-repeat 决定背景图

纯CSS控制背景图片100%自适应填充布局

https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; background-size:100% 100%; position:absolute; fil

项目期复习总结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-

css插入背景图片底部有白边的解决方法

相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图: 个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似的情况出现,如下图: 这种情况在移动端出现时,也可以给图片加上这个属性,(微信页面可能出现底部白边的情况更多,可能是因为很多微信页面是以图片为主) 解决方法2:用PS软件把背景图片的高度调高一些.出现的原因:可能是背景图片本身的高度不够,这种情况一般会出现底部留白比较多的情况,如下图: 注:个人推荐

html 刷新更新背景图

需求:每次刷新页面,随机获取背景图实现方式: 1 通过js动态生成标签 <body> <script type="text/javascript"> var bodyBgs = []; bodyBgs[0] = "/cas/img/login/bg/load1.jpg"; bodyBgs[1] = "/cas/img/login/bg/load2.jpg"; var randomBgIndex = Math.round(

移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = "viewport" content = “ width = device-width,user-scalable = no,initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0” width:宽度设置的是 viewpor

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1 设定背景图的大小在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

CSS之全屏背景图

吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全屏背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当backgrou

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

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

css 放大 背景图尺寸不变

热门专题

css 放大背景图尺寸不变