Question

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

Answer 1

试试这个

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


    }

HTML

<div class="circleimg "></div>

Answer 2

以下是您尝试执行的问题，只需参考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>

Answer 3

你可以试试这个：

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>

Fiddle

Answer 4

这是一个带有定位示例的演示，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;
}

Answer 5

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

SCSS

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

HTML

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

我认为，这样更优雅。

具有图像偏移的CSS圆形图像

5 个答案: