css3做背景云

CSS3是最新的CSS标准，它增加了许多新的特性。其中一个很有趣的特性就是可以用CSS3来制作背景云。下面我们来详细了解一下怎么做。

.backgroud {
    position: relative;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
}
.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: .2;
}
.cloud1 {
     width: 150px;
    height: 80px;
    top: -50px;
     left: -50px;
}
.cloud2 {
     width: 170px;
    height: 120px;
    top: -70px;
     right: -50px;
}
.cloud3 {
     width: 200px;
    height: 150px;
    bottom: -50px;
     left: -50px;
}
.cloud4 {
     width: 180px;
    height: 120px;
    bottom: -70px;
     right: -30px;
}
    

首先，我们要创建一个包含云背景的容器，设置它的高度为200px，因为我们要制作的是一个小型云背景。然后设置容器相对定位，并将overflow设置为hidden以去除溢出的云。我们将用绝对定位定位每个云。

现在我们来创建我们的云。我们需要使用CSS3的border-radius属性将方形云转换为圆形云形状。然后设置它们的位置与大小，最后用opacity属性调整它们的不透明度，使它们看起来像真正的云一样。

当然，我们还有许多其他方式来制作不同类型的云。你可以使用CSS动画，以及其他更高级的CSS属性。但对于初学者来说，这是一个很好的开始。在实践中尝试着做出你自己的背景云！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！