CSS

最新推荐文章于 2024-10-01 23:54:35 发布

原创最新推荐文章于 2024-10-01 23:54:35 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

工作笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍三种实用的CSS技巧：如何将图片展示为圆形；如何使div元素在屏幕中居中显示；如何设置背景图片透明度，同时保持文字不透明。

1.图片圆形展示。前提，图片是正方形。

倘若图片原图不是正方形，可以设置它的宽高相同。加上border-radius:50%即可。

2.如何使一个div在屏幕里居中显示

水平居中直接加上<center>标签即可，或者设置margin:auto;

方法一，div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

方法二，

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

 .main{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}3.如何使背景图片透明，文字不透明background:rgba(255,255,255,0.3);其中0.3这个属性值越大，透明度越高。与之对应的另一个透明度：opacity:0.3值越小，透明度越高，与上述相反。