background-size | 易学教程

js23-css使用flex的一天

阅读更多关于 js23-css使用flex的一天

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"> <title></title> <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/flex1.css"> </head> <body> <header> <ul> <li> <div></div> </li> <p>扫一扫</p> </ul> <ul> <li></li> <li> <div></div> <input /> <div></div> </li> </ul> <ul> <li> <div></div> </li> <p>消息</p> </ul> </header> <div class=

How to stretch background-image in html and css styling?

阅读更多关于 How to stretch background-image in html and css styling?

问题 I am new to html and css and is trying to create a personal website for learning purposes. I am having difficulties with the background image not stretching to fit the screen. Providing the code in the following. body{ background-image: url(backgroundimage.jpg); /*background-color: #95afc0;*/ background-size: cover; } The image works fine when the window is in full screen. I would like to see if there is any way for me to prevent it from duplicating the images to fit the screen and just crop

css sprite responsive实现探究

阅读更多关于 css sprite responsive实现探究

在做web app前端设计时，为了减少http的请求，提高系统响应时间，有一个非常常见的优化措施是：将所有用到的静态的图片通过合并形成一个sprite.png，并且配合background-position和background-size来实现对图片部分区域的引用显示，从而基本满足了对应的诉求：减少http请求，但是能够正常定位使用。但是问题是，一般地sprite工具产生出来的代码是根据图片的具体大小来定background-positon和background-size的对应参数，都是绝对值，当我们缩放viewport视窗大小时就不能正确引用到图片的正确部分了。要解决这个问题，必须使用相对百分比的参数数据，最后一通google，发现有一个网站非常好用。 https://responsive-css.spritegen.com/ 我们看看他创建出来的几个文件： sprite.png css /* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */ .sprite-comming, .sprite-javascript, .sprite-mysql, .sprite-php, .sprite-c, .sprite-html5, .sprite-css, .sprite

pc全屏网页布局小技巧

阅读更多关于 pc全屏网页布局小技巧

今天又写了一个全屏网页，其实之前也写了很多次，一直都没有总结，今天在这里总结出来的小技巧记录一下。pc的设计图一般都1920的，但是还有很多小屏，比如自己的笔记本就是1366，如果说完全按照设计图的尺寸布局，那放在小屏幕上浏览时总会有一些地方不协调，字体过大，图片过大，间距过大。下面就以今天的网页为例解析一下遇到的情况。 1、字体不协调的问题这个时候em这个单位就很用。我们pc端布局通常习惯使用px,px大小是固定的，而em大小不是固定的，em会继承父元素的字体大小，比如父元素的font-size为16px,其子元素的font-size为1em,那这个时候子元素的font-size换算过来就是16px，所以这时16px=1em,如果父元素font-size为20px,那这时1em=20px,em会随父元素font-size变化而变化。先看代码： .banner{ height: 634px; background: url(../images/banner_01.png) no-repeat center center; width: 100%; color: #992422; font-size: 14px; .title1{ font-size: 3.85em; padding-top: 125px; font-family: wending; word-spacing:

BootStrap如何让图片自适应不同屏幕宽度，并居中显示。

阅读更多关于 BootStrap如何让图片自适应不同屏幕宽度，并居中显示。

我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半看例子吧： <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <style> *{ margin: 0 auto; } .bannerbox { position:relative; overflow:hidden; height:410px; } .banner { width:2000px; /*图片宽度*/ position:absolute; left:50%; margin-left:-1000px; /*图片宽度的一半*/ } </style> </head> <body> <div class="bannerbox"> <div class="banner"> <img src="img/slide_04_2000x410.jpg"> </div> </div> </body> </html> 第二种方式，让图片做背景图，利用背景图的background-position:center

app端的前端界面适配问题

阅读更多关于 app端的前端界面适配问题

1.视口ViewPort适配  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> 适配视口之后,pc端和手机端屏幕大小不匹配问题就解决了; 2.图片不清晰问题使用大一倍的图片,通过css进行强制压缩到原来大小;背景图可以使用background-size适配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">  <title>app</title> <style type="text/css"> body{ margin: 0px; } .header{ height: 50px;

Table TR with background-size bug Safari

阅读更多关于 Table TR with background-size bug Safari

Look at this fiddle, he will work different on safari and chrome: https://jsfiddle.net/sew120xt/1/ Desired look (chrome): https://i.stack.imgur.com/q9ABs.png Bugged look (safari): https://i.stack.imgur.com/Sc6YF.png Seems like Safari will treat the style for TR as a style for his childrens instead, is there a fix for that? You seem to be correct that it is a bug. It isn't just the element <tr> itself but any element displayed as a table-row in a table displayed element. I've replicated the issue in the snippet below using non-table elements by changing the display property of each. (will only

background-size值为cover和值为100%的区别

阅读更多关于 background-size值为cover和值为100%的区别

background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。　IE8及以下版本用滤镜来兼容background-size如下: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 下面我通过给下图背景图添加 background-size 属性的不同属性值，更直观的显示出 100% 和 cover 的区别　　下图是添加 background-size:100% 100% 后的背景图效果，背景图被拉伸后有点失真　　下图是添加 background-size: cover 后的背景图效果，背景图被拉伸后背景图不能全部显示　　　　它们的区别：　　　　 background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，　　　　可能导致图像失真（建议让UI给原始背景图，否则容易出现图片拉伸后失真）　　　　 background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，　　　　图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像来源：

使用img标签和背景图片之间的区别

阅读更多关于使用img标签和背景图片之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素，但是可以设置宽高，占位， img设置width后height会自适应匹配，如果设置height后width会自适应匹配,如果同时设置width，height，img图片可能会变形 2.background-image 它是css的一个样式，并不占位，可以结合background-size,background-repeat,background-position等属性来设置图片位置，大小等它所在的元素必须指定height，否则背景图片显示不出来，可以不指定width，如果不指定width，它的宽度则继承父元素的宽度 3.它们之间的不同 img是html标签，占位，background-image是CSS样式，不占位 img是document对象可以操作(比如：从document对象中删除)，background-image是不能操作的在网页加载过程中，img作为网页结构内容的一部分，会在加载结构的过程中加载，而background-image作为css样式的一部分，会在结构加载完成后开始加载。(如果你引入了一个很大的图片，在这个图片下载完成之前，img后面的内容都不会显示，而如果用css引入同样的图片

使用less 媒体查询 rem进行手机客户端适配练习

阅读更多关于使用less 媒体查询 rem进行手机客户端适配练习

index.less @import "common"; body{ min-width: 320px; width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; background-color: #F7F7F7; } *{ box-sizing: border-box; text-align: center; } img{ display: block; } a{ text-decoration: none; } @bounce:50; /* 顶部搜索框 */ .top{ position: relative; overflow: hidden; &::before{ content: ""; position: absolute; height: 2000rem / @bounce; width: 2000rem / @bounce; border-radius: 2000rem / @bounce; z-index: -1; background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658)); left: -86.5%; top: -1600rem /

订阅 background-size