0

すみません、私の口調が悪いのかもしれません、

質問：

このような不透明な背景のCSS3コードを使用しています

編集：（コードを追加）

CSS:

opecity {
   opacity:.75; 
   content:('Hello');
   background:#111 url(../img/view.png) no-repeat center;
} 
.opecity img:hover{
   -moz-opacity: 0.10;
  opacity: 0.10;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
   background:#000;
}

HTML:

<div class="opecity">
  <a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
     <img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
  </a>
</div>

このコードは画像のみを表示しますが、コンテンツ「Hello」は表示しません。しかし、画像とコンテンツを同時に表示したい。この
Stackoweflow.com の質問にも関心があります。

同じ DIV 内の不透明な背景を持つ画像とテキスト

しかし、私は解決策を得ません。

4

2 に答える 2

0
  • 最初の行は、クラスなのでopecity {使用する必要があります。.opecity
  • コンテンツを分離し、自分の中に配置します.classs {}

いいえ:

.example-image-link:hover:after {
 content:'Hello';
}
  • 画像クラスの前または後に使用すると機能しません（これを試してください）

<\div class="opecity">

<\a class="example-image-link" href="img/port1.png" data-lightbox="example-1"> <\img class="example-image" src="http://humor. desvariandoando.com/wp-content/uploads/susto.jpg" alt="thumb-1" width="250" height="220"/> </div>

.example-image-link:hover:after { content:'Hello'; }

を削除してに\変更.example-image-link:hover:afterimg:hover:after

  • あなたが投稿したリンクは別の方法を使用しました：

これを試して：

<!DOCTYPE html>
<html>
<body>
<style>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}
</style>

<div>
  <span>Title</span>
  <img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>

</body>
</html>

（あなたのリンクからそれを取りました）

ここですべての html と css をテストできます: http://jsfiddle.net/

于 2013-08-30T13:48:22.923 に答える
0

W3Schoolsより: 「コンテンツ プロパティは、生成されたコンテンツを挿入するために、:before および :after 疑似要素と共に使用されます。」

試す

.opecity:after {
    content:'Hello';
}
于 2013-08-30T13:16:07.340 に答える