标签: background-image
CSS通过data-image attr设置背景图像
我有这种模式的元素:
<div data-image="{imageurl}" ...></div>
我想将这些元素设置background-image为data-image.我测试这个CSS代码:
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
边框显示正确但背景没有发生怎样才能用css(不是js或jq)修复此代码？
推荐指数
解决办法
查看次数
背景图像放置
我正在尝试将我的根LinearLayout元素(在两个维度中设置为fill_parent)设置为背景图像,无论设备的方向如何,该背景图像始终位于屏幕的左下角.如果有某种方法可以设置背景图像位置,例如使用"background-position:left bottom;"可以使用css执行的操作,这将是非常好的.但我没有看到在Android中实现这一目标的方法.有没有办法做到这一点？
谢谢您的帮助.
推荐指数
解决办法
查看次数
多个背景图像定位
我有三张背景图片,全宽643px.我希望他们像这样出发:
顶部图像(12px高度)不重复
中间图像重复-y
底部图像(12px高度)没有重复
如果不让它们重叠(这是一个问题,因为图像是部分透明的),我似乎无法做到这一点,这样的事情可能吗？
background-image: url(top.png),
url(bottom.png),
url(middle.png);
background-repeat: no-repeat,
no-repeat,
repeat-y;
background-position: left 0 top -12px,
left 0 bottom -12px,
left 0 top 0;
推荐指数
解决办法
查看次数
为什么最小高度不起作用？
所以这是独家新闻.
我有一个渐变应用于body元素的背景.然后我有一个容器(在身体后面),它有一个背景.png图像.渐变总是扩展到至少100%窗口高度,但容器(#body2)不会.
为什么这不起作用的任何建议？您可以在我的网页上查看HTML:http://www.savedeth.com/parlours/
推荐指数
解决办法
查看次数
如何将JSF图像资源引用为CSS背景图像url
我经常使用图像属性更改按钮的图像,但有人告诉我,使用.css这是一个很好的做法我试过但我不能,我做错了什么？这就是我做的:
1 - 我的项目资源存储如下:
2 - 这就是我创建style.css以访问图像的方式
.c2 {
background: url(/resources/images/smiley.jpg);
}
3 - 这是我从我的页面正文访问css的方式(我确定这是正确的,因为同一文档中的其他类适用于此页面中的其他标记)
<h:outputStylesheet library="css" name="style.css" />
4 - 这是创建使用适当的css类的示例commandButton的方法
<h:commandButton styleClass="c2"/>
我认为问题出现在.css中,我尝试了几种组合但没有效果:
background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);
哪里出错了？
更新 我设法通过以下代码使其工作:
.c2 {
background: url("#{resource['images:smiley.jpg']}");
}
注意我使用css(右)和使用图像属性时的差异(左)
我怎么能解决这个问题,以便显示保持图像？
推荐指数
解决办法
查看次数
CSS background-size:封面+背景附件:固定剪辑背景图片
我有一个包含背景图像的图表列表.类似于以下内容:
<ul>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
</ul>
这些图像中的每一个都background-size设置为cover并background-attachment设置为fixed.
figure {
width: 100%;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.
据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).
我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.
我知道有javascript解决方案但是有没有办法用CSS做到这一点？
这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ
推荐指数
解决办法
查看次数
如何用css移动背景图像
我想在一张有背景图像的桌子周围放一个边框.边框工作正常,但当我这样做(它是一个8px边框)时,背景图像被边框切断.我能够将背景图像向右移动8px并向下移动8px吗？
推荐指数
解决办法
查看次数
如何在不丢失Firefox和WebKit浏览器中的默认边框的情况下将背景图像应用于文本输入？
出于某种原因,如果您为其提供背景图像,大多数现代浏览器将停止将其默认输入边框样式应用于文本框.相反,你得到了丑陋的插图风格.据我所知,没有CSS方式来应用默认浏览器样式.
IE 8没有这个问题.Chrome 2和Firefox 3.5也可以,我也假设其他浏览器.从我在网上看到的IE 7有同样的问题,但该帖子没有解决方案.
这是一个例子:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
在Chrome 2中,它看起来像这样:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
而在Firefox 3.5:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
更新:JS解决方案:我仍然希望找到一个纯粹的CSS输入解决方案,但这里是我现在要使用的解决方法.请注意,这是粘贴在我的应用程序之外,所以不是一个很好的,独立的例子,如上所述.我刚刚从我的大型网络应用程序中包含了相关部分.你应该能够理解这个想法.HTML是带有"link"类的输入.大的垂直背景位置是因为它是一个精灵.在IE6,IE7,IE8,FF2,FF3.5,Opera 9.6,Opera 10,Chrome 2,Safari 4中测试过.我需要在某些浏览器中调整几个像素的背景位置:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); …推荐指数
解决办法
查看次数
使用CSS3动画更改背景图像
为什么这不起作用？我究竟做错了什么？
CSS
@-webkit-keyframes test {
0% {
background-image: url('frame-01.png');
}
20% {
background-image: url('frame-02.png');
}
40% {
background-image: url('frame-03.png');
}
60% {
background-image: url('frame-04.png');
}
80% {
background-image: url('frame-05.png');
}
100% {
background-image: url('frame-06.png');
}
}
div {
float: left;
width: 200px;
height: 200px;
-webkit-animation-name: test;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
DEMO
提前致谢!
推荐指数
解决办法
查看次数
如何在swift中将背景图像缩放到屏幕尺寸？
我正在尝试使用模式图像在swift中为我的背景制作UIView图像.我的代码运行良好,除了我希望图像占据整个屏幕的事实.我的代码看起来像这样:self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)
有谁知道如何使背景成为占据整个屏幕的图像,并且在出现在不同的iPhone屏幕尺寸时会缩放？
推荐指数
解决办法
查看次数