图片垂直居中,小图铺满div,css3点击变红叉,css背景图拉伸铺满

css代码,可以使块元素,和行内元素里的,照片居中:
display:table-cell;vertical-align:middle;text-align:center;
今天碰到一个问题是当前背景图片比较小的时候,不想让其重复铺满当前容器的背景:

运用img为一个单独图片容器的宽高等于父节点的宽高,并位于其下面,间接实现图片铺满当前容器

具体代码如下


<div style="width:100px;height:100px;">
<img src="img.jpg" style="width:100%;height:100%;position:absolute;z-index:-1;">
div>
css3点击变红叉

<html>
<head>
<style>
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: red;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
style>
head>
<body>

<p>Click on the Menu Icon to transform it to "X":p>
<div class="container" onclick="myFunction(this)">
  <div class="bar1">div>
  <div class="bar2">div>
  <div class="bar3">div>
div>

<script>
function myFunction(x) {
    x.classList.toggle("change");
}
script>

body>
变红叉end
一个背景图铺满body:
background:url('') no-repeat ; 
background-size:cover;(第一种:这个方法很好)
background-size:100% 100%; background-attachment:fixed;(第二种) 

你可能感兴趣的:(html前端)