Question

我需要帮助制作一个白色的opacitz窗口，我可以在上面写文字...... 如果它可以帮助我定位标题图片，那么我可以看起来更好而不会被挤压。

text-align: center;
}


body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: normal;
	background-image: url("https://www.jamesallenonf1.com/wp-content/uploads/Screen-Shot-2017-08-01-at-12.00.11.png");
	background-size: cover;
	background-repeat: no-repeat;
	}
*
{
  margin: 0 auto 0 auto; 
}

#header {
	position:relative;
	width: initial;
	height:99px;
	margin-left:29px;
	margin-right:21px;
    text-align: center;
}




.title
{
position:relative;
left:30px;
top:22px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:40px;
font-weight:bold;
color:red;
}

.articleTitle
{
text-align: center;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
color: #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
}

.articleContent
{
width:auto;
position:relative;
padding-left:25px;
padding-right:25px;
color:#000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
line-height:25px;
}


#bar
{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: red;
    position: sticky;

}

.menuLink
{
	height:36px;
	width: 130px;
	text-align:center;
	float:left;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#000;
	padding-top:20px;
}

.menuLink:hover
{
	background-color: white; 
	
}
a
{
text-decoration:none;
color:#000;
}

<!DOCTYPE html>
<html>
<head>
	<title>F1-Info</title>
	<style>
 body {

</style>
</head>
<body>
    <div id="header">
    	<div  class="title"><img width="1000px" height="120px" src="f1Domo.png"></div>
       
    </div>
    <div id="bar">
        <div class="menuLink"><a href="index.html">Home</a></div>
        <div class="menuLink"><a href="index.html">About</a></div>
        <div class="menuLink"><a href="index.html">Portfolio</a></div>
        <div class="menuLink"><a href="index.html">Services</a></div>
        <div class="menuLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="pageContent">
    
    <div class="articleTitle">F1-Info</div>
        
        
      <div class="articleContent">
      
      
             <br> <br> <br>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p><br />
          <p>Vestibulum augue hroifhreoghrehgoirehgirfiorwiof wh uwrhiu wiu uiw uwuifwoi guiwoiwui goiw guhi fwuisgviwrhug ui vuwrhkswoig jklwv wj jwbvui nkjvw wfjw bjkvwn wkj wv hwv jw hjwnwibv kwjoiwh woiv hw oiw jw wbquam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
	</div>


    </div>
        
</body>
</html>

Here is the sreenshot of my webpage

我需要帮助调整标题图片。

Answer 1

使用rgba颜色作为背景。对于白色它：

#YOURDIV {background: rgba(256,256,256,0.5);}

您可以谷歌查找更多信息。示例：https://en.m.wikipedia.org/wiki/RGBA_color_space

了解并使用背景图片： https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Answer 2

如果我理解正确，并假设您要将其设为articlecontent

在你的css文件中试试这个

 div .articleContent {
      background-color: rgba(255, 255, 255, 0.5);
    }

html中的白色不透明度框和调整标题（photoshopped）图片

2 个答案: