如何使用HTML和CSS加载/使用两个背景的背景

时间：2018-11-01 12:26:39

标签： html css

Portfolio Image

大家好！我正在尝试创建网页，就像我上面附加的图像一样。我希望它像是，当我加载或打开页面时，它应该更改背景或降低正面背景的不透明度。有什么办法吗？这就是我到目前为止所取得的成就。谢谢！

body {
    font-family: 'Dosis', sans-serif;
    color: white;
    animation: loader 5s;
    
}
main {
    background:  linear-gradient(150deg, rgb(107, 11, 197),rgb(255, 139, 178));
    transition: 
    background 0.5s 2s;
}
main:hover {
    background: url(https://serving.photos.photobox.com/23831723b5e651e8ea16cd2216cb3c7400315d33c9c59fa7b3e662cb8698b88c4534825a.jpg);
}
/*@keyframes loader {
    0% {
        background: linear-gradient(150deg, rgb(107, 11, 197),rgb(255, 139, 178));
      }
      /* You could think of as "step 2" */
     /* 50% {
        background: url(img5.jpg);
      }
} */
.container{
    width: 1100px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}
  
.left-column {
    font-size: 20px;
    width: 399px;
    float: left;
    margin-left: 100px;
    margin-top: 150px;
}
.right-column {
    height: auto;
    width: auto;
    margin-right: 200px;
    margin-top: 200px;
    overflow: hidden;
    float:right;
}
#img-profile {
    border-radius: 50%;
    max-width: 100%;
    margin: auto;
}
hr {
    background-color: red;
    display: block;
    height: 1px;
    width: 50px;
    border: 0;
    margin: 1em 0;
    padding: 0; 
}
button {
    background-color: white;
    color: purple;
    height: 40px;
    width: 150px;
    border: none;
    border-radius: 30px;
    font-family: 'Dosis', sans-serif;
    font-size: 15px;
    word-spacing: 3px;
}
<html>
    <head>
        <title>Portfolio Page</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    </head>
    <body>
        <main>
        <div class="container">
                <div class="left-column">
                    <div>
                        <h2>Hi, I'm Muhammad Sameem</h2>
                    </div>
                    <div>
                        <p style="color:yellow;">Web Developer</p>
                    </div>
                    <div>
                        <hr>
                    </div>
                    <div>
                        <p>I spend time travelling arround the world, helping startups and tech businesses hire the best people.</p>
                    </div>
                    <div>
                        <button>GET IN TOUCH</button>
                    </div>
                    <div style="float: left; margin: 20px 10px 0px 0px;">
                        <img src="https://i.imgur.com/CS66DNX.png" alt="My Profile Picture" width="30" height="30">
                    </div>
                    <div style="float:left; margin: 20px 10px 0px 0px;">
                        <img src="https://i.imgur.com/IEYytth.png" alt="My Profile Picture" width="30" height="30">
                    </div>
                    <div style="margin: 20px 0px 0px 0px;">
                        <img src="https://i.imgur.com/TiIwIJz.png" alt="My Profile Picture" width="30" height="30">
                    </div>
                </div>
                <div class="right-column">
                        <img id="img-profile" src="https://serving.photos.photobox.com/088524356761d1a2116d1da8976d59a32f8e11850488cb2fdcd0503f605d169a02ac23b1.jpg" alt="Profile Picture" width="200" height="200px">
                </div>
        </div>
    </main>
    </body>
</html>

3 个答案:

答案 0 :(得分：0)

尝试在main：hover;下将此行添加到代码中

transition: 0.2s;
opacity: 0.6;

我希望它将对您有帮助

答案 1 :(得分：0)

CSS 

 <style> 
        #ex1{
            background-image: url(demo1.gif), url(demo2.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 15px;
         }
 </style>





<div id="ex1">
        use multiple background
</div>

答案 2 :(得分：0)

您可以使用具有透明度的:before选择器添加背景渐变。

body {
  font-family: 'Dosis', sans-serif;
  color: white;
  animation: loader 5s;

}
main {
  background: url(https://serving.photos.photobox.com/23831723b5e651e8ea16cd2216cb3c7400315d33c9c59fa7b3e662cb8698b88c4534825a.jpg);
  background-size: cover;
  position: relative;
}
main:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, rgba(107, 11, 197,0.9),rgba(255, 139, 178,0.9));
  transition: opacity 0.5s;
  opacity: 1;
}
main:hover:before {
  opacity: 0;
}

.container{
  width: 1100px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.container:after{
  content: "";
  display: table;
  clear: both;
}

.left-column {
  font-size: 20px;
  width: 399px;
  float: left;
  margin-left: 100px;
  margin-top: 150px;
}
.right-column {
  height: auto;
  width: auto;
  margin-right: 200px;
  margin-top: 200px;
  overflow: hidden;
  float:right;
}
#img-profile {
  border-radius: 50%;
  max-width: 100%;
  margin: auto;
}
hr {
  background-color: red;
  display: block;
  height: 1px;
  width: 50px;
  border: 0;
  margin: 1em 0;
  padding: 0; 
}
button {
  background-color: white;
  color: purple;
  height: 40px;
  width: 150px;
  border: none;
  border-radius: 30px;
  font-family: 'Dosis', sans-serif;
  font-size: 15px;
  word-spacing: 3px;
}
<html>

<head>
    <title>Portfolio Page</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>

<body>
    <main>
        <div class="container">
            <div class="left-column">
                <div>
                    <h2>Hi, I'm Muhammad Sameem</h2>
                </div>
                <div>
                    <p style="color:yellow;">Web Developer</p>
                </div>
                <div>
                    <hr>
                </div>
                <div>
                    <p>I spend time travelling arround the world, helping startups and tech businesses hire the best people.</p>
                </div>
                <div>
                    <button>GET IN TOUCH</button>
                </div>
                <div style="float: left; margin: 20px 10px 0px 0px;">
                    <img src="https://i.imgur.com/CS66DNX.png" alt="My Profile Picture" width="30" height="30">
                </div>
                <div style="float:left; margin: 20px 10px 0px 0px;">
                    <img src="https://i.imgur.com/IEYytth.png" alt="My Profile Picture" width="30" height="30">
                </div>
                <div style="margin: 20px 0px 0px 0px;">
                    <img src="https://i.imgur.com/TiIwIJz.png" alt="My Profile Picture" width="30" height="30">
                </div>
            </div>
            <div class="right-column">
                <img id="img-profile" src="https://serving.photos.photobox.com/088524356761d1a2116d1da8976d59a32f8e11850488cb2fdcd0503f605d169a02ac23b1.jpg" alt="Profile Picture" width="200" height="200px">
            </div>
        </div>
    </main>
</body>

</html>

相关问题
最新问题