यहां CSS ग्रिड सिस्टम का उपयोग करके ओवरले एक लोगो की तरह एक छवि को मार्जिन दाईं ओर 2 divs के शीर्ष पर चाहते हैं मजबूत>। मैं अनुमान लगा सकता हूं कि एक से अधिक दृष्टिकोण होने चाहिए, मैं यह जानने के लिए उत्सुक हूं कि आप किस विधि का सुझाव देते हैं, और कृपया एक जीवंत उदाहरण प्रदान करें।

Div1 और div2 को पूरी चौड़ाई को थोड़े से मार्जिन से भरना चाहिए। छवि में कुछ पारदर्शिता होगी और दाईं ओर एक मार्जिन भी होगा, जैसे 80px

मैंने जिस कोड का प्रयास किया वह नीचे जैसा है, इस समय अपना काम नहीं कर रहा है:

.c1Wrap{
    display: grid;
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-rows: 100px 100px;

}


.c1HeaderTop{
    grid-row: 1;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
}

.c1Logo {
    z-index: 101;
    grid-row: 1/2; 
    opacity: 0.6;
    grid-row: 1/2;
    width: 200px;
    height: 200px;
    right: 80px;
    background-color: #222;    
} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>
<body>
<div class="c1Wrap">
    <div class="c1HeaderTop"></div>
    <div class="c1HeaderBottom"></div>
    <div class="c1Logo"></div>
</div>
</body>
</html>

वांछित रूप संलग्न है, किसी भी मदद के लिए धन्यवाद।

An image overlayed over 2 rows

0
Kasrak 7 जून 2018, 05:49

2 जवाब

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

उत्तर अतिव्यापी कक्षों द्वारा है, हमें स्तंभों को परिभाषित करने की भी आवश्यकता है। यह हमें सटीक परिणाम देगा।

.c1Wrap{
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 1fr 1fr 200px;
}

.c1HeaderTop{
    grid-row: 1;
    grid-column: 1/4;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
    grid-column: 1/4;
}

.c1Logo {
    z-index: 101;
    grid-row: 1/3;
    grid-column: 3;
    opacity: 0.6;
    background-color: rgb(134, 133, 133);    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div class="c1Wrap">
    <div class="c1HeaderTop"></div>
    <div class="c1HeaderBottom"></div>
    <div class="c1Logo">
    </div>
</div>
</body>
</html>
0
Kasrak 7 जून 2018, 18:08

मुझे यकीन नहीं है कि आप केवल CSS-ग्रिड के साथ ऐसा कर सकते हैं। इसे निरपेक्ष स्थिति का उपयोग करके आसानी से किया जा सकता है:

.c1Wrap{
    display: grid;
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-rows: 100px 100px;
    position: relative;
}


.c1HeaderTop{
    grid-row: 1;
    background: #db4ea5;
}
.c1HeaderBottom{
    grid-row: 2;
    background: #831d5c;
}

.c1Logo {
    z-index: 101;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.6;
    width: 180px;
    height: 180px;

    background-color: #222;    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>
<body>
<div class="c1Wrap">
    <div class="c1HeaderTop"></div>
    <div class="c1HeaderBottom"></div>
    <div class="c1Logo"></div>
</div>
</body>
</html>
0
IP_ 7 जून 2018, 06:20