background-size

How to emulate background-size: cover on <img>?

由 你。 提交于 2020-01-27 03:22:06
问题 How can I resize and reposition the image inside a box, in such way that it covers the entire box, similar to how background-size: cover works. <div class="box" style="width: 100px; height: 100px;"> <img src="pic.jpg" width="413" height="325"> </div> I know I have to add overflow:hidden to the box and the image needs position: absolute . But what's the formula that gets me the right new size for the image, and left + top positions? 回答1: this may be easier jQuery $('.box').each(function() { /

Background size cover is not working

由 孤者浪人 提交于 2020-01-16 03:39:39
问题 My PNG picture size is 1000px by 1000px. I use it as a background image in a DIV which has a height of 550px and a background-size: cover property. My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue? 回答1: Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided. From the screenshot, it

background-transition with background-size: cover

由 China☆狼群 提交于 2020-01-10 03:47:13
问题 This may already be answered somewhere but I haven't found yet after a bit of searching. I have a series of divs with background-images. The size is set to background-size: cover. But I want to be able to have the images zoom in and grow on hover. This transition doesn't work with the cover attribute it seems. Actually, the image zooms but without the transition effect. It goes instantly from "cover" to, in this case, 110%. It works fine when the original background-size was set as 100%. But

Background image size within an iframe is stretched

由 南楼画角 提交于 2020-01-07 03:49:52
问题 I'm having a weird issue where background images within an iframe are being stretched to the height of the iframe rather than the size of the div that they're attached to. Basically, I have a page made by a different agency that that will live within an iframe on the client's main site. This page has 4 or 5 sections with background images using the following css: background-image: url(../images/bkg1.jpg); background-attachment: fixed; background-position: top; background-repeat: no-repeat;

css3背景background

由 牧云@^-^@ 提交于 2019-12-27 04:33:14
背景图片（background-image） 在css3中背景图片可以放置多张图片， background-image: url(image1.jpg,image2.jpg) ，中间以都够分隔； 而且背景图片默认平铺，图片显示的位置默认从元素的padding开始显示。 由图我们可知，我们的图片是从padding的位置开始显示，我们可以通过属性 background-origin 来改变背景图片显示的位置 background-origin padding-box：从padding开始显示图片 border-box：从border开始显示图片 content-box：从content开始显示图片 背景图片大小（background-size） cover ：背景图片覆盖，将最短的边缩放至元素宽高 contain ：背景图片完整显示，将最长的边缩放至元素宽高 px ：具体的宽高 % ：百分比 background-size：cover background-size : contain 背景图片定位（background-position） 通过设置背景图片的定位，可以控制背景图片显示的区域，一般用于 Sprite图 。 background-size : 10px 10px ; 背景线性渐变（background-image:linear-gradient(#fff，#f00)） •

0074 二倍图：物理像素&物理像素比、背景缩放background-size

由 假如想象 提交于 2019-12-26 15:37:57
3.1物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6 是 750* 1334。 我们开发时候的1px 不是一定等于1个物理像素的。 一个px的能显示的物理像素点的个数，称为 物理像素比 或 屏幕像素比 。 如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放。 lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。 对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。 通常使用二倍图， 因为iPhone 6 的影响背景图片 注意缩放问题。 ​ /* 1. 物理像素 就是我们说的分辨率 iPhone8的物理像素是 750 */ ​ /* 2. 在 iPhone8里面， 1px 开发像素 = 2个物理像素 */ demo：二倍图做法 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = "

浅谈背景图片的填充

由 …衆ロ難τιáo~ 提交于 2019-12-26 14:07:09
在设计的过程中第一步就是先排版构建框架，后利用CSS对各个块进行定位。不过各个样式的id和class博客园本身已经定义好了，我们可以在设置面板中勾选禁用模板默认CSS”复选框。然后刷新博客首页查看源码，将代码copy到dw上修改样式。最后将自己修改满意好的css样式贴到“管理”-“博客设置”中“通过CSS定制页面”的文本框中。 言归正传，在设计的过程中需要填充背景图片，因为不同浏览器或窗口大小，图片可能只显示一部分或者重复填充多次，但是我们只需要一副完整的图片呈现。 这是一个div的id样式： #blogTitle{ background-image:url(image/blog2.jpg) ; height:400px; padding-left:5%; padding-top:20px; } 如果div的尺寸与背景图片的尺寸不一样或者DIV不是固定大小，那么图片肯定是无法完全显示。 所以加上一句 #blogTitle{ background-image:url(image/blog2.jpg) ; height:400px; padding-left:5%; padding-top:20px; background-size:cover; } 现在图片可以自动填充浏览器显示页面的大小。不过经过测试，至少在IE8上仍旧无法正常显示，然后继续测试发现这个属性在firefox

浅谈背景图片的填充

由 假装没事ソ 提交于 2019-12-26 12:01:27
因为今天刚刚开了blog，作为一个前端designer，就想自己设计自己的Blog样式，看着也舒心。 在设计的过程中第一步就是先排版构建框架，后利用CSS对各个块进行定位。不过各个样式的id和class博客园本身已经定义好了，我们可以在设置面板中勾选禁用模板默认CSS”复选框。然后刷新博客首页查看源码，将代码copy到dw上修改样式。最后将自己修改满意好的css样式贴到“管理”-“博客设置”中“通过CSS定制页面”的文本框中。 言归正传，在设计的过程中需要填充背景图片，因为不同浏览器或窗口大小，图片可能只显示一部分或者重复填充多次，但是我们只需要一副完整的图片呈现。 这是一个div的id样式： #blogTitle{ background-image:url(image/blog2.jpg) ; height:400px; padding-left:5%; padding-top:20px; } 如果div的尺寸与背景图片的尺寸不一样或者DIV不是固定大小，那么图片肯定是无法完全显示。 所以加上一句 #blogTitle{ background-image:url(image/blog2.jpg) ; height:400px; padding-left:5%; padding-top:20px; background-size:cover; }

background-attachment: fixed not working on Safari

由 混江龙づ霸主 提交于 2019-12-25 05:15:39
问题 I've got the following code running on an element that spans 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no-repeat; background-size:cover; } What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it). It seems to work on all the browsers except Safari - any ideas what I'm

CSS 背景

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-24 15:36:32
　　CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 　　说明： 样式 说明 background-color 定义背景颜色 background-image 定义背景图片 background-repeat 定义背景图是否平铺和平铺方式 background-position 定义背景图片位置 background-attachment 定义背景图显示方式 background-size 定义背景图的大小 background-clip 定义背景的裁剪区域 background-origin 定义背景的显示区域 一、background-color 背景颜色 　　可以使用该属性给一个元素定义背景颜色。 　　语法： background-color: color值; 　　 color 值可以是颜色单词，十六进制等 W3C 允许的颜色值。 　　 背景透明（CSS3）： 　　语法： background: rgba(0,0,0,0.3); 　　 最后一个参数是alpha 透明度 取值范围 0~1之间。 　　 Tips ： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。 二、background-image 背景图像 　　该样式属性用于设置背景图片。 　　语法： background-image : none | url (url) none：表示默认值，没有背景图；
订阅 background-size