Отображение изображения в виде наложения поверх двух строк - PullRequest
Новая
       2

Отображение изображения в виде наложения поверх двух строк

0 голосов
/ 07 июня 2018

Здесь с помощью системы координат CSS хотите наложить изображение как логотип с полем справа поверх 2 делений .Я могу предположить, что должно быть более чем один подход, я хочу знать, какой метод вы предлагаете, и, пожалуйста, приведите живой пример.

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

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Ответ заключается в перекрытии ячеек, также нам нужно определить столбцы.Это даст нам точный результат. 

.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 голосов
/ 07 июня 2018

Я не уверен, что вы можете сделать это только с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...