相关疑难解决方法(0)

是否可以有两个背景图像？例如,我希望在顶部重复一个图像(repeat-x),并在整个页面上重复另一个图像(重复),整个页面上的一个重复在顶部重复.

我发现通过设置html和body的背景,我可以达到两个背景图像的效果:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

这是"好"的CSS吗？有更好的方法吗？如果我想要三个或更多背景图像怎么办？

我想要实现这样的事情:

当我将鼠标悬停在图像上时,我想在图像上添加一些带有文字和图标的深色图像.

我被困在这里.我找到了一些教程,但他们没有解决这个问题.另外,另一个问题 - 每个图像都有不同的高度.宽度始终相同.

如何实现这种效果？

如何将图像放在另一个更大的图像上,比如在youtube上,播放按钮会显示在视频缩略图的顶部？

要求说明:

我使用d3解析.csv文件的数据,然后动态填充页面上的各种项目.一节如下所示:

我的代码进展:

• 我开始时将每个动态检索到的数字放在自己的div标签中,并动态设置每个背景图像.这是d3 JavaScript代码:

  careerstage_td.append("div")
  .text(function(d){ return d.count })
  .attr("class", "career-count")
  .style("color", function(d){return d.color;})
  .style("background-image", function(d){return "url('images/" + d.icon + "')";})
  .style("background-repeat", "no-repeat")
  .style("background-position", "center center");
  

  Run Code Online (Sandbox Code Playgroud)

  (请注意,我正在使用一个函数来动态填充数字以及确定要叠加的图像)

  这给了我以下预期结果,其中图像在文本后面:

• 下一步是弄清楚如何将背景图像叠加在文本之上.为此,我开始在谷歌上挖掘并在SO上找到这个问题:如何叠加图像.在这里我确定了两种不同的解决方案

  解决方案1 :(从该页面的顶部答案)在div中添加一个带有数字的跨度,然后使用css将跨度绝对放在中心,就像这样

  div.career-count span.stickperson
  {
      position:absolute;
      left:45%;
      top: 34%;
  }
  

  Run Code Online (Sandbox Code Playgroud)

  解决方案2 :(来自该页面上的另一个答案)添加以下用动态文本扩展div类的css,如下所示

  .career-count:after
  {
      content: url(/images/person_assoc.gif);
      position: absolute;
      left:45%;
      top: 34%;
  }
  

  Run Code Online (Sandbox Code Playgroud)

两种解决方案都有效,但解决方案1仅适用于Chrome,而解决方案2不允许我动态设置图像,因为它全部在css中完成,并且'after'contruct不能在线使用.

我很感激帮助找出一个允许我动态设置图像的解决方案,也适用于Chrome,Firefox 25和IE 11.

编辑:谢谢你的选票,伙计们.我现在添加了图片:)

我希望我的博客文章缩略图具有点状叠加效果。我找到了所有 CSS 背景图像控制的解决方案。但是使用这样的解决方案更难更改缩略图。

基本上我想要的是这样的：

                <div class="blog-image">
                    <div class="pixel-overlay"></div>
                    <img class="img-responsive" src="assets/img/post1.jpg">              
                </div>

然后缩略图是一个，因此您可以轻松控制其他帖子的来源。

我确实尝试了很多很多东西，但我从来没有让它工作。像素叠加 div 将始终将 IMG 推开。

那么如何创建一个没有像 background-image: "assets/img/post1.jpg" 这样的叠加层......