CSS知识课堂_css背景透明,内容居中-CSDN博客

本文链接：https://blog.csdn.net/runner_123/article/details/105555128

1、实现背景图片透明，图片之上的文字正常显示

技术点有二：

1、背景图片透明，其上的文字正常显示

2、文字垂直居中显示

分析：文字显示在背景之上，那么给文字的z-index：99；

文字是不定宽高的，用absolute+transform来实现

难点：发现将中间内容的元素透明度设为0.5，文字也会继承此特性，变为0.5

因此采用：::before伪类来实现

最终利用三层结构来实现

代码结构如下：

main：最外层，设置position:relative;

content:中间层，设置position:absolute,和伪类::before.在before中设置背景图片，并给图片添加opacity属性。

inner：最内层，用来垂直居中不定宽高的文字

实现代码：

   .content-wrapper {
            width: 100%;
            position: relative;
            height: 400px;
        }
        .content::before{
            content: "";
            background-image: url(imgs/elephant.jpg);
            opacity: 0.3;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .inner {
            z-index:100;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

2、水平垂直居中

元素结构如下：

<div class="wp">
    <div class="box">123123</div>
</div>

（1）定宽高元素适用

absolute + 负margin

（2）不定宽高的元素

absolute + transform
css-table

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

flex

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

grid

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

如上述代码.inner的实现/

3、实现一个图片，鼠标移动上去的时候换为图片文字介绍

技术点：了解3个CSS3属性

（1）backface-visibility 属性定义当元素不面向屏幕时是否可见。

（2）transition 属性设置元素当过渡效果，四个简写属性为：

transition-property
transition-duration
transition-timing-function
transition-delay

（3）Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

rotateY：定义沿着 Y 轴的 3D 旋转。

  .front,
        .back {
            width: 30%;
            height: 200px;
            position: absolute;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: -webkit-transform 300ms;
            transition: -webkit-transform 300ms;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            border-radius: 5px;
            margin: 3% 2% 10% 2%;
        }

        .front p {
            text-align: center;
            font-size: 15px;
            color: #00F;
        }

        .front img {
            width: 100%;
            height: 200px;
        }

        .back {
            background: -webkit-linear-gradient(top left, #009970, #84DD63);
            background: linear-gradient(to bottom right, #009970, #84DD63);
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }
      .item:hover .front {
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }  

        .item:hover .back {
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

4、animation 的简单用法：让图片动起来

.clouds img {
	max-width: 250px;
}

.clouds img:nth-child(1) {
	position: absolute;
	left: 0;
	bottom: 0;
	animation:mymove 5s infinite;
}
@keyframes mymove {
	from {
		left: 0;
	}
	to {
		left:100%;
	}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {left:0px;}
	to {left:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

用@keyframes来定义动画需要产生的效果；

分这样是这样

1、text-align:center

作用于行内元素，使行内元素水平居中，对inline-block也有作用。text-align 属性规定元素中的文本的水平对齐方式。

特别的，img是行内可替换元素，所以也可以使图片水平居中

2、grid布局

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。但目前仅有高版本浏览器支持

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

 <header>
                <h1>Klayf dffgi</h1>
                <p>kffffggg@hawk.iit.edu</p>
                <p>sfas3345252@123</p>
                <p><strong>BA Computer Science</strong></p>
                <p><strong>Expected Graduation: Dec 2020</strong></p>
 </header>

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

header {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: [start] 50% [middle] 50% [end];
    grid-template-rows: auto;
    grid-column-gap: 25px;
    grid-row-gap: 2px;
    line-height: 1.25;
}

header p:nth-child(2n) {
    justify-self: right;
}

header p:nth-child(2n + 1) {
    justify-self: left;
}

最终展示效果为：

3、响应式设计

Why code mobile-first

Code for larger screens is usually more complicated than the codes for smaller screens. This is why coding mobile first helps simplify your code.

要实现不同屏幕宽度，每一行的项目数不同。有时是三栏布局，有时是四栏布局，则可以写如下代码

.gallery_item{
Float:left;
      Margin-right:5%;
      @media (max-width:800px){
         &:nth-child(3n){
        Width:30%;
            Margin-right:0;
}
}
 @media (min-width:800px){
         &:nth-child(4n){
            Width:30%;
            Margin-right:0;
}
}
}

4、不同视窗的字体大小设计

可以给元素设置in单位 英寸（Inches）。绝对长度单位。

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

1vw = 1% of viewport width （浏览器视口宽度）
1vh = 1% of viewport height （浏览器视口高度）
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger