天道酬勤,学无止境

background-image

Using before and after pseudo-elements on background image

I am wanting to construct navigation items from three (background) images, with the first and last a fixed width, and the central a variable width, depending on the width of the text in the nav item. I have been led to believe that using the pseudo elements before and after would be the best method. When I try this though, the main (central) background image for the nav item is overlapping with the before and after background images. You can see what I mean on this page. Here is the CSS: .box { background-image: url(nav/images/nav_02.png); background-repeat: repeat; height:20px; position

2022-01-17 01:04:48    分类:问答    html   background-image   pseudo-element

what's the correct shorthand syntax when using multiple css background images/gradients?

I need to attach multiple backgrounds to an element via CSS and I can't use :before/:after. I'm wondering what the correct syntax to use multiple CSS background image is. There is a bunch of suggested ways I found, like here or here, but I can get neither of these: background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF; background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat; to work. This is what I currently have: background-image: rgba(0, 0, 0, 0.4) url("img/icons-18-white.png") no-repeat 0% 50%,linear-gradient( #9ad945, #7eb238 ); which is ignored. Only when I supply the

2022-01-16 22:03:39    分类:问答    css   background   background-image

这个滚动阴影 CSS-magic 是如何工作的?(How does this scrolling shadows CSS-magic work?)

问题 我从 2012 年发现了这篇臭名昭著的文章。它详细介绍了如何创建滚动阴影并且仍然可以很好地工作,但我真的很想了解解决方案,我似乎无法在网上找到必要的信息。 这是最初由@kizmarh 创建并由@leaverou 改进的缩小代码: .scrollbox { overflow: auto; width: 200px; max-height: 150px; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 100% 40px, 100% 40px, 100

2022-01-16 08:51:20    分类:技术分享    css   background-image   background-color   linear-gradients   radial-gradients

背景图案上方的 CSS 渐变(CSS gradient above background pattern)

问题 我想在其上方制作图案背景和白色到黑色(具有透明度)的渐变。 如何解决它并使其跨浏览器工作? 我从 Mozilla 开始,我尝试使用以下代码: background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95% 当然,这是行不通的。 那么如何解决呢? 该代码将如何查找其他浏览器? IE 是否支持多种背景和透明度? 我认为不是,所以我会在您回答之前先问一下-如何为 IE 解决这个问题? 回答1 您将需要两个独立的元素,一个覆盖另一个。 顶部的元素听起来应该是您的渐变。 仅供参考,这里是生成跨浏览器渐变的好工具,本周刚刚在 An Event Apart 推出: http://www.colorzilla.com/gradient-editor/ 回答2 试试这个: background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); background-image: url(images/pattern.png), -moz-radial

2022-01-16 08:13:29    分类:技术分享    css   transparency   gradient   background-image

XHTML 锚链接与背景图像和无文本(XHTML anchor link with background image and no text)

问题 是否可以在内部没有文本的锚链接有背景图像和固定尺寸,并且仍然有利于 SEO? 示例 CSS: a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;} a:hover img{background-position:0 -20px;} 示例 HTML: <a href="#"></a> 回答1 如果图像中有文本,或者您只是想添加其描述,您可以做的一件事来帮助 SEO 和可访问性是给锚一个标题和带有大负文本缩进的内容,比如将它添加到您a CSS : display:block; text-indent:-9999em; ...使用以下 HTML: <a href="#" title="IMAGE TEXT">IMAGE TEXT</a> 回答2 受到 neXib 对另一个答案的评论的启发。 HTML: <a href="/home" title="Homepage" class="home"> <div><img src="/images/sprite.png" alt="Home" /></div> </a> CSS: a { display: block;

2022-01-16 05:20:01    分类:技术分享    xhtml   anchor   background-image

我可以将图像转换为 CSS3 吗?(Can I convert an image to CSS3?)

问题 假设我有一个像这样的多边形图像PNG文件(没有边框,形状填充一种颜色,没有渐变,图像的背景是透明的)http://www.enchantedlearning.com/crafts/books/shapes/ gifs/4.GIF 我正在考虑使用该多边形图像作为背景图像,当用户将鼠标悬停在其上时,它将被更改(为另一个具有不同颜色的图像)。 但我也希望背景图像的颜色是可定制的。 所以,我在想是否有可能绘制多边形而不是使用图像文件,以便颜色可以自定义(我认为为一种颜色创建一个文件等等不是一个好主意) . 这种情况的最佳解决方案是什么? 使用 png 或通过 css 绘制它? 是否有工具/网站可以将我的 png 转换为 css 代码? 回答1 使白色区域透明(在 GIMP 中颜色为 alpha) 将图像转换为数据 URI(它是可选的,但它会使您的网站加载速度更快) 使用 (2) 中的 url 作为background-image并使用您想要background-color 。 回答2 使用它来转换图像:http://codepen.io/blazeeboy/pen/bCaLE 我认为使用转换后的图像要好得多,因为浏览器加载它们的速度更快。 回答3 我认为 CSS 是错误的。 是的,使用 CSS 可以创建很多形状,但是有一些限制,无论如何,使用 CSS 绘制形状有点小技巧

2022-01-16 03:22:25    分类:技术分享    css   background-image   polygons

Can I convert an image to CSS3?

Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it. But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it

2022-01-16 01:38:24    分类:问答    css   background-image   polygons

XHTML anchor link with background image and no text

Is it possible to have anchor links no text inside that has a background image and fixed dimensions and still be good for SEO? Example CSS: a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;} a:hover img{background-position:0 -20px;} Example HTML: <a href="#"></a>

2022-01-16 01:17:16    分类:问答    xhtml   anchor   background-image

CSS平铺背景图像的最佳尺寸(Optimum size of CSS tiled background-images)

问题 人们经常说,当使用 background-image 平铺网页的背景时,由于需要较少地平铺,因此使用较大尺寸的图像性能会更好。 一段时间以来,我一直将它们设为 8x8 像素或 8 的倍数。 但是有没有人有数据链接可以证明在一系列浏览器中都是这种情况,在渲染时间或页面渲染的各个点上的 CPU 负载? 回答1 我想在您在评论中列出的这些现代浏览器中,这无关紧要: IE 8/9 和最新版本的 Firefox/Safari/Chome/Opera 但是,我听说 IE8 中有一个错误,涉及大小正好为1px * 1px的图像: 当页面上的任何其他元素对 alpha 透明度使用“-ms-filter”指令时,Internet Explorer 8 不会正确执行 1x1 像素半透明背景图像的重复: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 见:http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/ 和演示:http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/ 所以, 8x8似乎是一个足够好的尺寸来使用

2022-01-15 23:48:47    分类:技术分享    css   performance   background-image

Optimum size of CSS tiled background-images

It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8. But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?

2022-01-15 20:43:12    分类:问答    css   performance   background-image