时间戳

首页 > 解决方案 > 溢出：隐藏在 Div 中无法正常工作

css - 溢出：隐藏在 Div 中无法正常工作

问题描述

所以，我是新手，我正在研究一个基本的重定向 Tumblr 主题[不重要]，但我有一个横幅，它是一个 div 框，我想像使用溢出一样适合图像：隐。唯一的问题是，该命令不起作用。必须复制和粘贴部分代码，我认为 c/p'ed css 中的某些内容使其无法正常工作。另外，如果我的代码写得很糟糕，请提前抱歉，我还是新手。

写着“此博客已移动”的白色背景/横幅是我试图隐藏的内容，因此它不会与边框重叠。

    <!DOCTYPE HTML>
<HTML>
<HEAD>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</HEAD>
<STYLE>


 body {background-color: #dff2f4;}



  img {
  height: 500px;
  width: 710px;
  margin-top: 100px;
  margin-left: 355px;
  border-width: 15px;
  border-radius: 50px;
  border-style: double;
  border-color: white;
  overflow: hidden;
  background-color: #cbdaff;
 }


 .centered {
  font-family: 'SourceSansPro-ExtraLight';
  transform: translate(-50%, -50%);
  background-color: white;
  text-align: center;
  position: absolute;
  color: #dadada;
  top: 50%;
  left: 50.7%;
  width: 750px ;
  font-size: 30px;
  letter-spacing: 10px;
  overflow: hidden;
  padding: 7px 7px 7px 7px;




}



 @font-face {
    font-family: 'SourceSansPro-ExtraLight.ttf';
    src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



</STYLE>
<BODY>

 <div class="banner">
  <div class="centered">THIS BLOG HAS MOVED</div>

 <img src="https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif">



 </div>












</BODY>
</HTML>

标签： cssoverflow

解决方案

这是？

body {background-color: #dff2f4;}

.img {
	background: url("https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif");
	height: 500px;
	width: 710px;
	margin-top: 100px;
	margin-left: 355px;
	border-width: 15px;
	border-radius: 50px;
	border-style: double;
	border-color: white;
	overflow: hidden;
	background-color: #cbdaff;
}

.centered {
	font-family: 'SourceSansPro-ExtraLight';
	transform: translate(-50%, -50%);
	background-color: white;
	text-align: center;
	color: #dadada;
	margin-top: 50%;
	width: 750px ;
	font-size: 30px;
	letter-spacing: 10px;
	padding: 7px 7px 7px 7px;
}

@font-face {
	font-family: 'SourceSansPro-ExtraLight.ttf';
	src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
<div class="banner">
	 <div class="img">
	  <div class="centered">THIS BLOG HAS MOVED</div>
	 </div>
 </div>

推荐阅读