代码之家 › 专栏 › 技术社区 › Labanino

有没有一种方法可以在不使用背景图像的情况下创建一个英雄图像,上面有文本:url();?

css3 css html

0

Labanino · 技术社区 · 7 年前

有没有一种方法可以创建一个英雄形象,上面有文字,而不使用 background-image: url(); 和 position relative

也许可以用css网格完成,不确定?我走了这么远:

https://codepen.io/labanino/pen/NejZEy?editors=1100

3 回复 | 直到 7 年前

1

doğukan 7 年前

没有 position:relative background:url()

url("https://fonts.googleapis.com/css?family=Londrina+Solid");

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  color: #fff;
  margin:0;
  padding:0;
  position:absolute;
}

.hero {
  display: flex;
  justify-content:center;
  align-items:center;
}

.hero {
  img {
    width: 100vw;
  }
}

<div class="hero">
  <h1>This is my dummy text!</h1>
  <img src="//unsplash.it/600/200" alt="">
</div>

2

0

repo 7 年前

为什么?Pos relative是这里最好的方式

U可以使用高度0和文本上可见的溢出

3

0

Desmond Mullen 7 年前

<div class="hero">
    <h1 class="theText">This is my dummy text!</h1>
    <img class="theImage" src="//unsplash.it/600/200" alt="">
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');

* { 
  box-sizing: border-box; 
}
body { 
  font-family: 'Poppins', sans-serif;
  margin: 0; 
  padding: 0;
}
h1 {
  font-size: 2rem;
  color: #2F4858;
}

.hero {
    position: relative;
}

.theImage {
    position: absolute;
    width: 100vw;
    top: 0;
    z-index: -1;
}

.theText {
    position: absolute;
    top: 80px;
    width: 100vw;
    left:50%;
    margin-left: calc(-50vw);
    text-align: center;
    z-index: 1;
}