0

円と画像のオフセットを使用して内部に画像を含む div を作成することは可能ですか? たとえば、高さ 1200px の画像があり、CSS で 100x100 ピクセルの円を作成したい場合、この円の初期 x 位置は 500px である必要がありますか?

4

5 に答える 5

0

これを試すことができます：

CSS:

#circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid red;
    background-image: url('IMAGE-URL-HERE');
    background-position: 500px, 200px;
}

HTML:

<div id="circle"></div>

フィドル

于 2013-06-29T12:45:37.147 に答える
0

これは、配置の例、画像の幅と高さ、および指定されたサイズに合わせて塗りつぶされた div 背景のデモです。JSBIN

HTML

<div></div>

CSS

div {
   background-color: red; /*to show circle in demo */
   background-image: url("");
   background-size:contain;  
   /* contain scales image to largest size and makes it fit inside the content area. */
   background-position: 500px 200px;  
   border-radius: 50%;
   height: 1200px;
   width: 1200px;
}
于 2013-06-29T12:46:01.103 に答える
0

これがあなたの質問の実行を試みたものです。それを参照して100x100 pixelsくださいinitial x position 500px

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
   border:2px solid #a1a1a1;
   padding:100px 100px; 
   background:#dddddd;
   width:300px;
   border-radius:500px;
}
</style>
</head>
<body>
    <div> Circle image for Moldaone </div>
</body>
</html>
于 2013-06-29T12:42:17.750 に答える