सरकारी चलने वाली पृष्ठभूमि को कैसे बदला जाए

CSS के द्वारा सरकारी चलने वाली पृष्ठभूमि चित्र को कैसे बदला जाए एवं सीखें。

सरकारी चलने वाली पृष्ठभूमि चित्र को कैसे बदला जाए

फ्रेम में नीचे घुमाएं, प्रभाव देखने के लिए:

亲自试一试

सरकारी चलने वाली पृष्ठभूमि चित्र को कैसे बदला जाए

पहला कदम - HTML जोड़ें:

<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div class="bg-text">TEXT</div>

दूसरा कदम - CSS जोड़ें:

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
.bg-image {
  /* पूरी ऊंचाई */
  height: 50%;
  /* चित्र को मध्य में रखें और उचित रूप से छोटा करें */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* इस्तेमाल किए गए चित्र */
.img1 { background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg"); }
.img3 { background-image: url("img_lights.jpg"); }
.img4 { background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg"); }
.img6 { background-image: url("img_woods.jpg"); }
/* टेक्स्ट को पृष्ठ/चित्र के मध्य में रखें */
.bg-text {
  background-color: rgb(0,0,0); /* पिछला रंग */
  background-color: rgba(0,0,0, 0.4); /* काला आधारित पारदर्शी */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* फ़िक्स्चर करें */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}

亲自试一试