前端问题，关于HTML5,CSS3，制作一个空心圆
我打算制作一个如图的页面透明的div，其中有一个圆但是我实际效果只能做成这样代码如下<!doctypehtml><html><head><metacharset="utf...
我打算制作一个如图的页面透明的div ，其中有一个圆
但是我实际效果只能做成这样
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;}
.div1{
height:1000px;
width:100%;
background-color:#ccc
}
.div2{
height:400px;
width:400px;
margin-top:150px;
background-color:#ccc;
border-radius:500px;
box-shadow:inset 0px 0px 15px #333;
background-image:url(ToBosom/14.jpg);
background-size:cover;
background-attachment:fixed;
margin-left:100px;}
</style>
</head>
<body style="background-color:#ccc;">
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html> 展开
但是我实际效果只能做成这样
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;}
.div1{
height:1000px;
width:100%;
background-color:#ccc
}
.div2{
height:400px;
width:400px;
margin-top:150px;
background-color:#ccc;
border-radius:500px;
box-shadow:inset 0px 0px 15px #333;
background-image:url(ToBosom/14.jpg);
background-size:cover;
background-attachment:fixed;
margin-left:100px;}
</style>
</head>
<body style="background-color:#ccc;">
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html> 展开
3个回答
展开全部
你可以试试2个div都设一下背景，一个模糊的放底层，清晰的放上层，通过控制清晰的那个div的位置和背景位移来达到你要的效果，或者你网上搜一下模糊滤镜的js脚本来实现，当然，如果你那个清晰的圆形的位置是固定不变的，那么你还是把这个效果用ps做成一张图是最好的，这也是最方便的，做网页设计不要纠结于技巧，能用最简单的方式达到效果是最好的方式，如果是我，我肯定就是做2个图片来实现效果最简单快捷
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试2div都设背景模糊放底层清晰放层通控制清晰div位置背景位移达要效或者网搜模糊滤镜js脚本实现清晰圆形位置固定变效用ps做张图便做网页设计要纠结于技巧能用简单式达效式我我肯定做2图片实现效简单快捷
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用一张镂空的png图片放在上面就行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
