html - html5 2 图像内部部分仅包含 css

Question

我试图通过 css 2 图像在一个部分中添加，使它们看起来像这样：

但我唯一能用 css 管理的东西是这样的：

我可以在 html 中使用 div 并且可以通过 html 添加 img 但在 HTML5 中它在语义上是错误的，因为这是一张“情绪”图片 - 所有情绪图片都进入 css（由我的班主任告诉）有什么想法吗？

#Principle1 {
    background-image: url(../pictures/puzzle1.png), url('../pictures/Paranormalwikipic.png');
    background-repeat: no-repeat, no-repeat;
    width: 583px;
    height: 500px;
}

            <section id="Principle1">
                <h2>
                    מסר מספר 1: תאמין בעצמך!
                </h2>
                <p>
                    שיעור מספר אחת נמצא כמעט בכל אנימה. כל אחד צריך להאמין בעצמו, ולא לתת לדעות אחרים להשפיע עליו. מי יודע, אולי תהיה גיבור העל הבא?
                </p>
            </section>

标签： htmlcss

Answer 1

您可以在 CSS 上使用此语法来定位和缩放多个背景。

例子：

background: 
  url(one.png) 0 0 no-repeat,
  url(two.png) -576px 100% no-repeat, 
  url(three.png) -288px 0 repeat-y;
background-size: 50px 50px, 100px 100px;