मैं दो SVG इमेज (Tobias-Raketfart.svg class="turbotobias-shake Turbotobias-rocket-img" और TurboTobias-Blue-clouds.svg class="turbotobias-smoke") को पोजिशन करने की कोशिश कर रहा हूं। हर बार जब मैं एक समाधान के साथ आता हूं तो यह कहीं भी उत्तरदायी नहीं होता है।

मैं स्थिति के साथ खेल रहा हूं: पूर्ण; और फिर नीचे और दाएं के साथ स्थिति। यह परिणाम मेरे पीसी मॉनीटर पर अच्छा दिखता है लेकिन किसी भी अन्य स्क्रीन पर बहुत ही भयानक है। दो एसवीजी छवियों को स्थापित करने के लिए मैं क्या कर सकता हूं?

अंतिम परिणाम का मोबाइल मॉकअप मैं हासिल करने की कोशिश कर रहा हूं

अंतिम परिणाम का पीसी मॉकअप मैं हासिल करने की कोशिश कर रहा हूं

एचटीएमएल:

<body>
    <div class='turbotobias-hero-section-wrapper'>
        <div class='turbotobias-row'>
            <div class='turbotobias-column'>
                <div class='turbotobias-first-column'>
                    <h1 class="turbotobias-fp-h1">Vil du have
                        <div class="turbotobias-h1-enhanced">raketfart</div>
                        <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
                    </h1>
                    <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
                </div>
            </div>
            <div class='turbotobias-column'>
                <div class='turbotobias-second-column'>
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
                </div>
            </div>
            <div class="turbotobias-divider-clouds"></div>
        </div>
    </div>
</body>

सीएसएस:

body {
  background: #fff;
  color: #333333;
  margin: 0;
  box-sizing: border-box;
  font-family: open sans,Arial,sans-serif;
  font-size: 14px;
  overflow: hidden;
  word-break: break-word;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-column .turbotobias-first-column {
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
}

.turbotobias-first-column {
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0);
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: #0082a4;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  padding-left: 20px!important;
  margin-top: 0px!important;
  display: flex;
  align-items: center;
}

.turbotobias-h1-enhanced {
  font-weight: 900;
  font-size: 120%;
}

.turbotobias-h1-smaller {
  font-size: 70%;
}

@media (min-width: 980px) {
h1.turbotobias-fp-h1 {
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 700;
  font-size: 60px !important;
  color: #303030!important;
  line-height: 1em;
  text-transform: uppercase;
}
}

@media (max-width: 979px) {
  h1.turbotobias-fp-h1 {
      padding-bottom: 0px;
      margin-bottom: 0px;
      margin-top: 0px;
      font-weight: 700;
      font-size: 33px !important;
      color: #303030!important;
      line-height: 1em;
      text-transform: uppercase;
  }
  }

.turbotobias-sub-h1 {
  font-size: 24px;
  color: #303030;
  font-weight: 400;
  font-family: open sans,Arial,sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-smoke {
  position:absolute;
  bottom: 0;
  width: 470px;
  height: auto;
  z-index: 9;
  right: 30%;
}

.turbotobias-rocket-img {
  position: absolute;
  bottom: 30%;
  right: 36%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media screen and (min-width: 800px) {
  .turbotobias-column {
  align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
      padding: 30px 0;
  }
}

सांकेतिक टुकड़ा

css svg position css-position
1
TobiasM 22 जुलाई 2019, 00:55

1 उत्तर

सबसे बढ़िया उत्तर

कुछ बदलाव किए गए हैं। सवाल यह है कि बादल दिखाई क्यों नहीं देता? - लाइट-एबव-क्लाउड्स-एचडी-टर्बोटोबियास.jpg turbotobias-second-column वर्ग के साथ Div को हमेशा दो svg को केंद्र में रखना चाहिए और आपको केवल इसे नियंत्रित करना चाहिए।

body {
  background: #fff;
  color: #333333;
  margin: 0;
  font-family: open sans, Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-first-column {
  text-transform: uppercase;
  border-left: 10px solid #0082a4;
  padding: 20px 0 20px 20px;
  margin-top: 0;
  font-weight: 700;
}

@media (max-width: 799px) {
  .turbotobias-first-column {
    text-align: center;
  }
}

.turbotobias-fp-h1 {
  margin: 0 0 20px 0;
  font-size: calc(12px + 2vw);
  font-weight: 600;
  line-height: 90%;
}

.turbotobias-h1-enhanced {
  font-size: calc(24px + 2vw);
  font-weight: 900;
  line-height: 100%;
}

.turbotobias-h1-smaller {
  font-size: calc(17px + 1vw);
  font-weight: 600;
}


.turbotobias-sub-h1 {
  font-size: calc(14px + 0.5vw);
  font-weight: 400;
}

.turbotobias-sub-h1 {
  color: #303030;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-second-column {
  display: flex;
  justify-content: center;
  max-width: 470px;
  margin: auto;
}

.turbotobias-rocket-img {
  bottom: 30%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-smoke {
  position: absolute;
  bottom: 0;
  max-width: 470px;
  height: auto;
  z-index: 9;
}

.turbotobias-shake {
  animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@media (max-width: 790px) {
  .turbotobias-rocket-img {
    z-index: 2;
    max-width: 420px;
  }
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(1px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}


.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media (min-width: 800px) {
  .turbotobias-column {
    align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
    padding: 30px 0;
  }
}
 <div class='turbotobias-hero-section-wrapper'>
    <div class='turbotobias-row'>
      <div class='turbotobias-column'>
        <div class='turbotobias-first-column'>
          <h1 class="turbotobias-fp-h1">Vil du have
            <div class="turbotobias-h1-enhanced">raketfart</div>
            <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
          </h1>
          <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
        </div>
      </div>
      <div class='turbotobias-column'>
        <div class='turbotobias-second-column'>
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
            class="turbotobias-shake turbotobias-rocket-img">
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
            class="turbotobias-smoke"></img>
        </div>
      </div>
      <div class="turbotobias-divider-clouds"></div>
    </div>
  </div>
0
Grzegorz T. 22 जुलाई 2019, 18:18

संबंधित सवाल

16 केंद्र एक निश्चित स्थिति को संरेखित करता है div
1 दाईं ओर अतिरिक्त जगह
1 आईई में ग्रिड व्यू लाइन्स नहीं दिख रही हैं

नए सवाल

3 सीएसएस से स्टाइल घटक में कनवर्ट करें (टर्नरी ऑपरेटर)
2 ::पहले . का उपयोग करके कोने का लेबल जोड़ें
1 YouTube वीडियो एम्बेड को प्रतिक्रियाशील बनाएं
4 बटन का आकार बदलते समय व्यवहार
2 div इसकी अधिकतम ऊंचाई को अनदेखा करता है
3 मेरा दूसरा ईवेंट लिस्टर पहले वाले के बाद काम क्यों नहीं करेगा
2 मैं एलिमेंट के साथ दो बैकग्राउंड इमेज कैसे जोड़ सकता हूं?
3 HTML हेडिंग नंबरिंग अनपेक्षित रूप से रीसेट हो जाती है
2 एचटीएमएल ईमेल पर लाइट और डार्क मोड के लिए टेक्स्ट कलर जैसे बैकग्राउंड कलर कैसे सेट करें?
2 पीछे कोड में एक सीएसएस वर्ग संपत्ति कैसे प्राप्त करें
css के बारे में सभी प्रश्न >