Question

我正在尝试将this作为div上的CSS背景，但我希望图像开始以200px like this左右开始淡入背景（黑色背景用于例）。是否只有CSS这样做？

我打算在NodeWebkit中包装这个项目，所以只要它在Chrome中运行我就不会担心其他浏览器了。

提前致谢！

HTML：

<div class="profileBox">
  ...
</div>

CSS：

.profileBox {
  background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
  background-repeat: no-repeat;
  width: 300px;
}

Answer 1

尝试此解决方案，不需要修改HTML而不是JS。

基本上，您可以使用-webkit-linear-gradient为图片添加属性url来创建渐变。

http://jsfiddle.net/0kj8t1zq/6/

<div class="profileBox"></div>

.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;    
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;

Answer 2

你已经有了将它淡化为黑色的答案。

如果要将其淡化为透明，则需要屏蔽。它没有太多支持，但它适用于Chrome

＆＃13;

.profileBox {
  background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
  background-repeat: no-repeat;
  width: 300px;
  height: 400px;
  -webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
  border: solid 2px white;
}

body {
  background-color: blue;  
}

＆＃13;

<div class="profileBox"></div>

＆＃13;

将身体背景更改为蓝色以查看它是否真的透明

Answer 3

对于淡入淡出效果，您可以在rgba中使用webkit-gradient。

要获取图像和渐变作为背景，您可以使用不透明度。但是没有CSS属性background-opacity，所以你可以通过插入一个具有规则不透明度的伪元素来伪装它，后面的元素的确切大小（source）。

＆＃13;

.profileBox {
  width: 300px;
  height: 300px;  
  display: block;
  position: relative; 
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /*   Opera 11.10+ */
  background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}

.profileBox::after {
  content: "";
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background-repeat: no-repeat;
  background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg); 
}

＆＃13;

<div class="profileBox">

</div>

＆＃13;

CSS Opacity Fade

3 个答案: