Question

我正在尝试弄清楚如何使我的主页与我的名片相似，在这里看到没有文字：http://katiehambor.com/images/businesscardexample.png

我希望网页有这个裁剪的圆圈来模仿我的名片，而且几乎在任何浏览器尺寸下，左右两侧仍会看到背景图像（斜条纹）。基本上应该裁剪圆的顶部和底部，并且应该暴露左侧和右侧，以便显示背景图像（未在此编码器上显示）。我希望它能够响应，所以如果有人让他们的浏览器变小，那么圆圈仍然会居中。我也不希望能够看到圆圈的底部，因为现在如果你向下滚动就可以看到底边。

圈子中不会有很多文字，因此无需担心所有文字都适合内部。

我也希望这个网站具有响应性，这样对于水平屏幕，它看起来就像这样，但在垂直屏幕上，可能会显示整个圆圈。我不需要弄明白这一点，因为我知道如何看到完整的圆圈，因为我的问题在于裁剪圆圈，但这只是要记住的事情。

此外，圆圈内还会有一个文本div，现在只是说“文字”，我将其透明以供参考。我知道这可能需要更多的div来完成，但我真的不知道从哪里开始。

请告诉我是否有什么我可以澄清我的问题 - 抱歉，如果它看起来很混乱！

编辑：以下是我的第一次尝试，但它已更改，现在可以看到here。

/*original on: http://codepen.io/mezzotessitura/pen/kfenK */

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>

<style>
body {
  text-align: center;
  background-image:url(images/background.jpg);
  background-size: auto;
  color: black;
}

.box {
     background-color:#00a886;
     padding:5px;

     top:-10%;bottom:0;left:15%;right:15%;
     width:55em;
     height:55em;
     position:absolute;
     border-radius:50%;
 }

.textbox {
    height:auto;
    margin:5em;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    background-color:#fff;
    opacity:.25;
}


</style>
</head>

<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>

Answer 1

在身体上尝试background-size:cover。但我会让它跨浏览器友好。

-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;

Answer 2

这对你来说应该更好。 http://codepen.io/anon/pen/utkbF

使用css创建圆圈：

.box{
  border-radius: 50%;
  background-color:#00a886;
  margin: auto;
}

Answer 3

我收到了Reddit here的答案。

使用vw来完成响应方面。并转换为居中（来自这篇css-tricks文章）。我使用position: absolute代替fixed，但在这种情况下两者都做同样的工作，因为div.box相对于body定位。

裁剪大圆的顶部和底部

3 个答案: