3

誰か助けてもらえますか？

ページに表示している画像があります。画像には、CSSのトリックで達成した丸みを帯びた角がいくつかあります。しかし、問題は画像を自動拡大縮小することです。

aを使用して画像をスケーリングすること<img>は問題ありませんが、これをbackground-imageで実現するため、角の丸いコードに使用すると問題になります。

誰かが私が2つを組み合わせる方法を知っていますか？

CSSで丸みを帯びた角を実現する方法は次のとおりです。

.informationBarLeft {
width: 24%;
height: 160px;
border: 1px solid #000000;
float: left;
margin-right: 1%;
background-image: url('../Images/pumpkin-soup.jpg'); /*The image to use */
background-repeat: no-repeat;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

}

そして、HTMLは次のようになります。

<div class="informationBarLeft">&nbsp;</div>

ご覧のとおり、私はこの<img>要素をどこにも使用していません。CSSでこれを実行できるのでしょうか。

4

3 に答える 3

3

css3の背景サイズプロパティを使用してスケーリングできますbackground-size: 100% 100%;

-moz-background-size: 100% 100%;           
-o-background-size: 100% 100%;           
-webkit-background-size: 100% 100%;      
background-size: 100% 100%;
于 2012-07-27T13:28:50.890 に答える
3

使用background-size: cover;：

.informationBarLeft {
  width: 24%;
  height: 160px;
  border: 1px solid #000000;
  float: left;
  margin-right: 1%;
  background-image: url('../Images/pumpkin-soup.jpg'); /*The image to use*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

作業デモ

于 2012-07-27T13:27:43.833 に答える
1

を使用して画像を拡大縮小している間、問題は見つかりませんbackground-image: url("#")。ここでこれをチェックしてください：http：//jsfiddle.net/sE3RG/

/* The image to useコメントを削除するか、少なくとも末尾の*/タグで閉じる必要があると思います

[または]background-size: cover;コードを使用することはできますが、私はそれが何度も機能するのを見たことがありません。ただし、JSFiddleコードで動作します:)

于 2012-07-27T13:32:07.737 に答える