为了账号安全,请及时绑定邮箱和手机立即绑定

如何用css让图片上有一块透明??

如何用css让图片上有一块透明??

梅影西风 2016-06-08 09:58:34
如图让圆圈能显示背景的木头颜色,圆圈是在每个矩形上加的div
查看完整描述

7 回答

?
FengCMS

TA贡献14条经验 获得超9个赞

我的代码是基于懒人一只的代码的优化.因为我感觉使用定位去优化不太优雅.所以,就优化了一下.思路还是人家的.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="love"></div>
    </div>
</body>
</html>
<style>
    body {background: #999;}
    .box {
        background-color: transparent;
        width: 30px;height: 30px;border-radius: 15px;
        border-color: #f60;border-style: solid;
        border-width: 40px 200px 20px 20px;
    }
    .love {
        background-color: transparent;
        width: 30px;height: 30px;border-radius: 15px;
        box-shadow: 0 0 0 15px #f60;
    }
</style>


查看完整回答
7 反对 回复 2016-06-15
  • ziler3152301
    ziler3152301
    学习了
  • smilelove
    smilelove
    这样整个box的内容区域就是love了,别的内容怎么放,例如上图中的文字??还是用定位??
?
懒人一只

TA贡献14条经验 获得超19个赞

这是我给body添加背景色的样子
//img1.sycdn.imooc.com//5757d2bd0001f14e07770359.jpg

查看完整回答
3 反对 回复 2016-06-08
?
刚毅87

TA贡献345条经验 获得超309个赞

设置 opcity = 0;吧透明度设为0就行了

查看完整回答
2 反对 回复 2016-06-08
  • 梅影西风
    梅影西风
    不行 显示的是矩形的颜色
  • 刚毅87
    刚毅87
    也是,那你可以在圆形 div 中插入木头的背景图片,然后通过定位背景图片的位置.
  • 梅影西风
    梅影西风
    没有更简便的方法吗 假如有很多个圆 那不是太麻烦了吗
点击展开后面1
?
依韵_宵音

TA贡献4条经验 获得超1个赞

试试rgba这个属性吧,rgb分别是颜色 a 表示透明度。

查看完整回答
反对 回复 2016-06-27
?
smilelove

TA贡献4条经验 获得超56个赞

楼上的回答都是用border来实现外层的圆角矩形,可是矩形有内容呢,难道把内容放在border上??用定位??太复杂吧

查看完整回答
反对 回复 2016-06-26
  • 7 回答
  • 2 关注
  • 7494 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信