Question

我是html / css的新手，我知道之前已经多次询问过，但答案没有帮助/无法理解它们。我认为它与我在html端安排页面的方式有关。感谢

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div.img {
  opacity: 0.3;
  border-radius: 44px background-color:#555;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Let Go</title>
</head>


<body>
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>
</body>

</html>

Answer 1

对图像执行半径，而不是包含它的元素。此外，在设置背景颜色

之前，您缺少半色

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div img {
  opacity: 0.3;
  border-radius: 44px; 
  background-color:#555;
}

  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>

Answer 2

两个错误：选择器必须div.img img影响图像本身，并且缺少半音：

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div.img img {
  opacity: 0.3;
  border-radius: 44px;
  background-color: #555;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Let Go</title>
</head>


<body>
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>
</body>

</html>

边界半径问题

2 个答案: