将非透明文本添加到半透明div容器中？

时间：2017-09-20 03:04:43

标签： html5 css3 parent-child opacity

我正在尝试使用半透明标签在4个黑框中使用<p>标签添加文字。我希望容器内的文本根本不透明。

我从我所读到的内容中知道这是一个令人烦恼的CSS挫折。我已经看到了使用rgba()颜色作为背景或使用.png图像的选项。我在父容器上尝试了rgba()方法并且没有用。

由于图像文件大小增加了加载时间，因此我不想使用图像。我尝试的一切都没有奏效。有人可以给我一些关于如何处理这个问题的建议吗？以下是我的代码。

＆＃13;
＆＃13; 
.wrapper {
  position: relative;
  padding: 0 15px;
}

.responsive-image {
  width: 100%;
  height: auto;
}

#statement {
  position: absolute;
  text-align: center;
  top: 280px;
  left: 300px;
  font-size: 50px;
  font-weight: bold;
  color: #ffffff;
}

.opaque-box {
  position: absolute;
  top: 670px;
  left: 15px;
  background: #000000;
  opacity: 0.4;
  text-align: center;
  width: 25%;
  height: 30%;
  border-top: solid 2px #ffffff;
  border-bottom: solid 2px #ffffff;
}

p.box-content {
  padding-top: 50px;
  color: white;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  position: relative;
}

.nav-item>a {
  color: #000000;
  font-weight: bold;
}

.nav-wrapper {
  position: absolute;
  right: 0;
  left: 0;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mock Up</title>
  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Bootstrap Link -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="nav-wrapper">
    <nav class="navbar navbar-static-top">
      <!--Navbar-->
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
             <!-- Collapsing Hamburger Buttons for mobile -->
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
        </div>
        <!--Menu Items-->
        <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a href="#home">HOME</a>
            </li>
            <li class="nav-item">
              <a href="#showroom">SHOWROOM</a>
            </li>
            <li class="nav-item">
              <a href="#services">SERVICES</a>
            </li>
            <li class="nav-item">
              <a href="#info">INFO</a>
            </li>
            <li class="nav-item">
              <a href="#photos">PHOTO GALLERY</a>
            </li>
            <li class="nav-item">
              <a href="#contact">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
  </div>
  <div class="wrapper">
    <img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
  </div>
  </nav>
  <div class="opaque-box">
    <div>
      <p class="box-content">NEW <br>INVENTORY</p>
    </div>
  </div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>

  <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是我发现对我有用的东西。我不得不使用top和left属性将文本引导到下面是代码，这是一个合适的解决方案。我确信有更清洁的方法可以做到这一点，但我现在还没有意识到这一点。

＆＃13;
＆＃13; 
.wrapper {
	position: relative;
	padding: 0 15px;
}

.responsive-image {
	width: 100%;
	height: auto;
}

#statement {
	position: absolute;
	text-align: center;
	top: 280px;
	left: 300px;
	font-size: 50px;
	font-weight: bold;
	color: #ffffff;
}

.opaque-box {
	z-index: 1;
	position: absolute;
	top: 670px;
	left: 15px;
	background: #000000;
	opacity: 0.4;
	width: 325px;
	height: 197px;
	border-top: solid 2px #ffffff;
	border-bottom: solid 2px #ffffff;
}

.box-content {
	text-align: center;
	z-index: 2;
	padding-top: 50px;
	color: #ffffff;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	position: relative;
	top: -380px;
	left: -500px;;
}

.nav-item > a {
	color: #000000;
	font-weight: bold;
}

.nav-wrapper {
  position:absolute;
  right: 0;
  left: 0;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="nav-wrapper">
        <nav class="navbar navbar-static-top">
            <!--Navbar-->
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <!-- Collapsing Hamburger Buttons for mobile -->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!--Menu Items-->
                <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a href="#home">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a href="#showroom">SHOWROOM</a>
                        </li>
                        <li class="nav-item">
                            <a href="#services">SERVICES</a>
                        </li>
                        <li  class="nav-item">
                        	<a href="#info">INFO</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#photos">PHOTO GALLERY</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#contact">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
    </div>
    <div class="wrapper">

        <img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
    </div>
    </nav>
    <div class="opaque-box"></div>
    <a href="#new-inventory"><p class="box-content">NEW <br>INVENTORY</p></a>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>

    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题