Questions tagged «background-image»

之前曾问过这个问题，但该解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面不可或缺的。（它们不是直接在页面中的图像，因为其中有几个用作CSS精灵。） 关于该问题的另一种解决方案建议使用list-style-image，只有在每个图标都有不同的图像且没有CSS精灵的情况下，它才有效。 除了创建带有内联图标的单独页面之外，还有其他解决方案吗？

102 css  printing  background-image 

我有一个简单的Chrome扩展程序，该扩展程序使用内容脚本功能来修改网站。更具体地说，background-image所述网站。 由于某些原因，即使扩展中打包了本地图像，我似乎也无法使用它。 body { background: #000 url('image.jpg') !important; background-repeat: repeat !important; } 就是这样，最简单的CSS ...但是它不起作用。浏览器不会加载图像。

98 css  google-chrome-extension  background-image 

我试图用选择器制作一个按钮，我的按钮可以具有以下状态： 启用/禁用 按下/未按下 根据上述状态。我需要操纵按钮的： 文字颜色 背景图像 该按钮从被禁用开始，因此应该具有禁用的textColor和禁用的按钮背景。但是我可以看到默认的textColor（以样式指定）并且没有背景图片！ 这是我的选择器button_selector.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false" android:state_enabled="false" android:textColor="#9D9FA2" android:drawable="@drawable/button" /> <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/button_pressed"/> <item android:state_pressed="true" android:state_enabled="false" android:textColor="#9D9FA2" android:drawable="@drawable/button"/> <item android:state_pressed="false" android:state_enabled="true" android:drawable="@drawable/button"/> </selector> 这是我的layout.xml中的按钮声明 <Button android:id="@+id/reserve_button" android:text="@string/reserve_button" android:layout_width="120dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:layout_marginLeft="20dp" android:paddingRight="15dp" android:layout_gravity="left" style="@style/buttonStyle" android:background="@drawable/button_selector" /> 最后这就是我的风格（设置了我的默认textColor） <?xml version="1.0" encoding="utf-8"?> …

98 android  xml  button  selector  background-image 

img具有srcset属性看起来像是一种制作响应式图像的好方法。cssbackground-image属性中是否存在等效的语法？ 的HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> 的CSS .mycontainer { background: url(?something goes here?); }

89 html  css  background-image  srcset 

我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在标题下方有一张产品图片，该图片始终为100％的宽度（设计表明，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初是使用img（CSS宽度为100％）完成此操作的，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为应该为图像使用CSS背景，而不是HTML中的img标签。 我似乎无法正常工作，因为带有背景图片的div既需要宽度也需要高度来显示背景。我显然可以使用“宽度：100％”，但是高度该怎么用？我可以设置一个随机的固定高度，例如150px，然后可以看到图像的顶部150px，但这不是解决方案，因为没有固定高度。我玩过一次游戏，发现一旦有一个高度（用150px测试），我可以使用'background-size：100％'将图像正确地放入div中。我可以将较新的CSS3用于该项目，因为它仅针对移动设备。 我在下面添加了一个粗略的示例。请原谅内联样式，但我想举一个基本的例子来尝试使我的问题更清楚一些。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> 是否可能需要根据整个页面给容器div设置一个百分比高度，还是我认为这是完全错误的？ 另外，您认为CSS背景是执行此操作的最佳方法吗？也许有一种技术可以根据设备/屏幕宽度来提供不同的img标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。 我很抱歉，这有点冗长，但是我从这个项目来回到下一个项目，所以我想把这件事做完。在此先感谢您的宝贵时间，不胜感激。问候

89 html  css  background-image  responsive  responsive-images 

我正在尝试获取HTML元素（body，div等）的背景图像，以拉伸其整个宽度和高度。 运气不好。是否有可能，或者除了背景图片外，我还必须采取其他方法吗？ 我当前的CSS是： body { background-position: left top; background-image: url(_images/home.jpg); background-repeat: no-repeat; } 提前致谢。 编辑：我不希望在Gabriel的建议中维护CSS，所以我改为更改页面的布局。但这似乎是最好的答案，因此我将其标记为这样。

88 html  css  background-image 

我有一个按钮，当我单击它时，我想提醒的background-imageURL #div1。 可能吗？

88 jquery  url  html  background-image 

假设我有 <div class="myDiv">Hi there</div> 我想提出一个background-image并给它一个opacity的0.5-但我想，我写的文字将有充分的不透明度（1）。 如果我这样写CSS .myDiv { opacity:0.5 } 一切都会变得不透明-我不想要那样。 所以我的问题是–如何获得具有完全不透明度文本的低不透明度背景图像？

86 html  css  background  background-image 

我想在JS中动态更改背景，并且我的图像集采用base64编码。我尝试： document.getElementById("bg_image").style.backgroundImage = "url('http://amigo.com/300107-2853.jpg')"; 结果完美 但我无法通过以下方式执行相同操作： document.getElementById("bg_image").style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')"; 也不 document.getElementById("bg_image").style.backgroundImage = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE..."; 有什么办法吗？

84 javascript  base64  background-image 

我计划为朋友建立一个自定义的图片库，我确切地知道我将如何制作HTML，但是CSS遇到了一个小问题。（如果可能，我希望页面样式不依赖jQuery） 我的问题是：CSS Data-Attribute中的HTML Background-image 我将这种格式用于html缩略图： <div class="thumb" data-image-src="images/img.jpg"></div> 我认为CSS应该看起来像这样： .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: attr(data-image-src);/*This is the question piece*/ } 我的目标是把data-image-src从div.thumb我的HTML文件，并使用它的每一个div.thumb（或多个）background-image在我的CSS文件来源。 这是一支Codepen笔，以便获得我所寻找的动态示例：http : //codepen.io/thestevekelzer/pen/rEDJv

80 css  background-image  custom-data-attribute 

我有三个问题： 当我尝试在较小尺寸的div中使用背景图像时，div仅显示图像的一部分。如何显示图像的全部或特定部分？ 我的图片较小，想在更大的div中使用。但是不想使用重复功能。 CSS中有什么方法可以处理图像的不透明度？

78 css  background-image  opacity