Question

如何在响应式div中设置背景？

我想在div加号（字体真棒）里面。

接下来是问题：

如果我想设置背景图片，我需要设置height，否则div不可见（当我设置height: auto;）;
第二件事，如果我设置一个固定的height（让我们说，200px），div没有响应，逻辑上;
第三件事，如果我以某种方式解决了这个问题，我怎样才能在div verticaly和horizontaly中设置加号？

有什么想法吗？

感谢。

Answer 1

在您的情况下，您可以在填充和宽度上使用%值来保持纵横比相对于父级，并使用一些绝对位置作为加号：

＆＃13;

div {
  width:50%;
  padding:25% 0;
  background:url('http://placehold.it/500') no-repeat;
  background-size:cover;
  position:relative;
}
div > span {
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  height:30px;line-height:30px;
  background:red;color:white;
  width:50%;text-align:center;
}

＆＃13;

<div><span>PlusSign</span></div>

＆＃13;

Answer 2

如果你希望+在一个正方形的响应框中居中，那么你可以这样做：

div {
	width: 20%; 
	padding-bottom: 20%; 
	background: url(http://lorempixel.com/output/nature-q-g-640-480-4.jpg) no-repeat; 
	background-size: cover; 
	position: relative;
}

p {
	font-size: 4em; 
	color: white; 
	margin: 0; 
	padding: 0; 
	font-weight: bold; 
	position: absolute; 
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
   	-moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
   	-o-transform:translate(-50%, -50%);
  	transform:translate(-50%,-50%);
  }

<div><p>+</p></div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 20%; 
    padding-bottom: 20%; 
    background: url(http://lorempixel.com/output/nature-q-g-640-480-4.jpg) no-repeat; 
    background-size: cover; 
    position: relative;
}

p {
    font-size: 4em; 
    color: white; 
    margin: 0; 
    padding: 0; 
    font-weight: bold; 
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%,-50%);
  }

</style>
</head>
<body>

<div><p>+</p></div>

</body>
</html>

如何在响应div中设置背景？

2 个答案: