0

是否可以创建带有圆圈和图像偏移的内部图像的 div？例如，如果我有一个高度为 1200 像素的图像，我想用 CSS 创建一个 100x100 像素的圆圈，并且这个圆圈的初始 x 位置必须为 500 像素？

4

5 回答 5

0

尝试这个

    .circleimg {
    border-radius: 50%;
    width:100px;
    height:100px;
    background-color:purple;
background-position:500px 0;


    }

HTML

<div class="circleimg "></div>
于 2013-06-29T12:37:41.393 回答
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 回答
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

您可以通过以下方式实现它：

SCSS

  .rounded-circle {
    border-radius: 50%;
    height: 2.5em;
    width: 2.5em;
  }

HTML

<img class="rounded-circle" 
    src="image-route" 
    alt="">

在我看来，这种方式更优雅。

于 2019-03-11T18:40:41.693 回答