Question

我需要设置一个带有背景图像的区域，该区域将被动态设置＆＃34;使用异地SOA服务器调用。所以，我不知道图像的宽度或高度是什么（它们可以是任何尺寸），我甚至不知道在运行时之前的URL是什么。我需要缩放背景图像以响应地占据显示的宽度，但是具有不透明度，使得文本将位于该图像的顶部。

我看过这个： https://scotch.io/quick-tips/how-to-change-a-css-background-images-opacity

这个解决方案部分有效，但它和我在这个问题上找到的其他答案似乎都假设图像网址是已知的和/或可能是硬连线的＃34;进入css文件。我找到了另一种使用JQuery修改后台URL的解决方案，但它们似乎并没有合作。有推荐的方法吗？

显然，我可以让JQuery编写所有CSS，但这似乎不是一个很好的方法。因为动态图像在真实的Web应用程序的现实生活中发生的更实际的事情，所以CSS文件首先在其中硬连线是没有意义的。

＆＃13;

$(document).ready(function(){
  $('.restHeaderBack').each(function(){
    var getImg = $(this).attr('data-img');
    $(this).css('background-image', 'url(' getImg + ')');
  });
});

＆＃13;

.restHeaderBack:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 3em;
  width: 100%;
  height: 100px;
  z-index: 1;
  opacity: 0.2;
  /*
  background-image: url("../Artwork/Example/CypressG_.JPG");
  */
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="restHeaderBack" data-img="../Artwork/Example/CypressG_.JPG">
  <h2 class="nobr">Cypress Grill</h2>
</div>

＆＃13;

Answer 1

使用选项1来解决这个问题。不像时髦而且不够完美，但似乎工作得很充分。

<div class="restHeaderBack" >
    <h2 class="nobr">Cypress Grill</h2>
    <img src="../Artwork/Example/CypressG_.JPG">
</div>


.restHeaderBack {
    position: relative;
    overflow: hidden;
    height: 100px;
    border-bottom: 1px gray solid;
}
.restHeaderBack h2 {
    padding: 5px;
    position: relative;
    z-index: 2;
    font-weight:900;
} 

}
.restHeaderBack img {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    width: 100%;
    height: auto;
    opacity: 0.2;   
}

Answer 2

我认为你需要修复你的javascript代码，这是一个可能的解决方案。

[由于我没有显示您试图显示的图像，我使用了测试图像进行演示]

＆＃13;

var divObj = $('.restHeaderBack');
var imageUrl = divObj.data('img');
divObj.css('background-image', 'url(' + imageUrl + ')');

＆＃13;

.restHeaderBack {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 3em;
width: 100%;
height: 100px;
z-index: 1;
opacity: 0.2;
/*
background-image: url("../Artwork/Example/CypressG_.JPG");*/
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="restHeaderBack" data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUHWYIxS_pF_qVRkUox4kwlHVCok05IK30-2RZIt7ha8iZFCAF8g">
    <h2 class="nobr">Cypress Grill</h2>
  </div>

＆＃13;

UPATE：你在找这样的东西吗？ http://codepen.io/anon/pen/PqGzmb

具有不透明度的动态背景图像

2 个答案: