Question

我在下面输入了HTML和CSS代码。问题是，背景图像无法显示。请帮忙。提前谢谢。

＆＃13;

.parallax-1 {
  height: 200px;
  width: 100%;
  background: linear-gradient(to bottom, #000 -10%, transparent 30%),
              linear-gradient(to top, #000 -10%%, transparent 30%),
              url('http://lorempixel.com/400/200');
  background-size: cover;
}

.parallax {
  width: 100%;
}

.descript {
  background: #f2f2f2;
  font-family: 'open sans', sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 0.7em;
  padding: 5px 10px;
}

＆＃13;

<!DOCTYLE html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,300,400' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="parallax-1 parallax">
      <div class="descript-parallax">
        <span>Description for the image</span><br>
        <span class="photo-descript">Copyright someone</span>
      </div>
    </div>
  </body>
</html>

＆＃13;

更新：我删除了线性渐变ans尝试，如在答案中给出的一些代码中所建议的那样。我该如何添加它们？另外，为什么这个问题只出现在顶级浏览器Chrome（最新版本）？根据下面的评论，有些浏览器正在显示它。

Answer 1

你的CSS已经混淆了。

像这样使用

editText.addTextChangedListener(new TextWatcher() {

   public void afterTextChanged(Editable s) {}

   public void beforeTextChanged(CharSequence s, int start, int count, int after) {
   }

   public void onTextChanged(CharSequence s, int start,
     int before, int count) {

     //Do your stuff here

   }
  });

为了获得带有gardient的背景图像。（How do I combine a background-image and CSS3 gradient on the same element?）

Answer 2

它适用于Firefox，Chrome，...但您需要为FF的每个-moz-定义背景，为Chrome定义-webkit-等等。

有例子：

.parallax-1 {
  height: 200px;
  width: 100%;
  border:solid 1px gray;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) -10%, rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-10%,rgba(0,0,0,0.65)), color-stop(30%,rgba(0,0,0,0))),url('http://lorempixel.com/400/200');
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -ms-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background-size: cover;
}

.parallax {
  width: 100%;
}

.descript {
  background: #f2f2f2;
  font-family: 'open sans', sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 0.7em;
  padding: 5px 10px;
}

<div class="parallax-1 parallax">
      <div class="descript-parallax">
        <span>Description for the image</span><br>
        <span class="photo-descript">Copyright someone</span>
      </div>
</div>

当然，对于.parallax您可以添加color:white或其他颜色，因为您的渐变背景，文字的黑色很难看到。

div的背景图像未显示。我能做什么？

2 个答案: