Question

我是CSS的新手，我想在背景图片中将文字“ MOUNTAINS”放到山后。如下图所示。

这是现有代码

const fruitSchema = new mongoose.Schema({
    fruit: {
      type: String
      required: true,
      async validate(name) {
        if (name === 'apple') {
            let fruit 

            try {
                fruit = await Fruit.findOne({ name })
            } catch (e) {
                console.error('[Fruit Model] An error occurred during validation.')
                console.error(e)
                throw e // rethrow error if findOne call fails since fruit will be null and this validation will pass with the next statement
            }

            if (fruit) throw new Error(`A fruit for ${name} already exists.`)
        }
        },
    type: {
      type: String,
      required: true
    }
})

schema.index({ fruit: 1, type: 1 }, { unique: true })
const Fruit = mongoose.model('Fruit', fruitSchema)

#home{    
    height: 100%;
    position: relative;
    padding: 0;
}

#home-img{
    background: url("../img/home/1.jpg");
    background-size: cover;       
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

#home-content{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    letter-spacing: 1px;
    line-height: 124px;
    color: #4d4d4d;
    font-family: 'Bebas Neue', cursive;
}

#home-content #first-title{
    color: rgb(77, 77, 77);
}

#home-content #second-title{
    color: rgb(65, 79, 107);
}

#home-content h1{
    font-size: 115px;
    margin-left: -25%;
    margin-top: -8%;
}

我对此感到困惑。那么CSS专家可以帮助我做到这一点吗？谢谢

Answer 1

嗨，请看一下摘要。

**z-index** and **position** are important key factors for this case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body style="background-image: url(https://images.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);">
	<div style="background-image: url(https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Grass-Grounds-Coverings-PNG-Clipart/Green_Grass_PNG_Clip_Art_Image.png?m=1532246688);
				background-repeat: no-repeat; height: 100vh; width: 100%; background-size: contain;
				background-position: bottom; z-index: 8; position: relative;">
	</div>
	<h1 style="z-index: 0; position: absolute; font-size: 40vh; transform: translate(-50%, -50%); left: 50%; top: 25%; text-align: center;">Hello<br>Mountain </h1>
</body>
</html>

Answer 2

这是代码。试试看，然后用您的文件替换这里的文件：

.box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
    .box .text{
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;        
        text-align: center;
        top: 35%; /* Adjust this value to move the positioned div up and down */
        font-family: Arial,sans-serif;
        color: #000; /*Set your own colour*/
        width: 60%; /* Set the width of the positioned div */
    }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
</head> 
<body>
    <div class="box">
    	<img src="https://www.tutorialrepublic.com/examples/images/kites.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>
        </div>
    </div>
</body>
</html>

希望对您有帮助。

如何在CSS中将文字放在图片后面？

2 个答案: