css - 背景位置根本不起作用 [ CSS3 ]

Question

尝试image通过使用 CSS3 来设置适合我的屏幕的样式，但我认为background-repeat，background-position或者background-size根本不工作..

这是我归档的结果....

Code in Html

<v-card @click="addPos(item)" v-if="item.image" class="posCard">
    <div class="posCard--pos-img">
        <img :src="'http://127.0.0.1:8000/image/' + item.image" />
    </div>
    <div class="posCard--title">
        <span>{{ item.name }}</span>
    </div>
</v-card>

And Here the code in style tag

<style lang="scss">
.posCard {
        border: #000;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
        // box-shadow: 0 1px 15px 1px rgba(60, 55, 68, 0.15);
        &--pos-img {
            height: 6rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: center;
        }

        &--title {
            text-align: center;
            background: #efefef;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }
</style>

我当然想，也许我在我的代码中做错了什么......

任何帮助将不胜感激。提前致谢...

标签： csssass

Answer 1

您将图像用作前景并将样式应用于背景。

尝试这个。

<v-card @click="addPos(item)" v-if="item.image" class="posCard">
   <div class="posCard--pos-img">
   </div>
</v-card>

.posCard {
    &--pos-img {
        height: 6rem;
        background-repeat: no-repeat;
        background-image: url("http://127.0.0.1:8000/image/item.image");
        background-position: center;
        background-size: center;