Nativescript-Vue Как сделать компонент Transparency to Page, который не повлияет на дочерние элементы
Привет, надеюсь, ты в порядке.
У меня есть проблема, и я не мог ее исправить. Я хочу прикрепить свойство background-image из URL-адреса и добавить непрозрачность с цветом, который не повлияет на детей.
На самом деле все берите непрозрачность, если кто-то может мне помочь, это будет здорово!
Спасибо заранее
Вот мой пример кода:
<template>
<Page class = "ns-light page">
<ActionBar :title = "`${actionBarName}`"/>
<StackLayout orientation = "vertical" style = "text-align: center; margin-top: 5%">
<Label text = "Tap to play the music" style = "font-weight: bold"/>
<Image :src = "src" @tap = "playSound" width = "300" style = "margin-top: 5%"/>
</StackLayout>
</Page>
</template>
<style scoped>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.page {
background: url('~/assets/images/cards/background.png') no-repeat center #53ba82;
background-size: cover;
opacity: 0.5;
}
</style>
Да, на самом деле у меня есть background: url, но я хочу только применить к нему непрозрачность.
Вы не можете применить непрозрачность к слою background-image, не затрагивая его содержимое. opacity применяется ко всему, отображаемому этим элементом. У вас есть два варианта: а) вы изменяете само изображение и делаете его полупрозрачным. б) вместо использования background-image вы используете псевдо (:before или :after), вы позиционируете его абсолютно так, чтобы покрыть весь элемент, и вы даете каждому дочернему элементу z-index значение 1, а псевдо z-индекс равен 0. Если вы нужно, могу привести пример.
Для решения б) вы, очевидно, можете поиграть с псевдоэлементом opacity на лету и поместить background-image на него вместо родительского элемента. Весь смысл в том, чтобы поместить background-image на другой элемент, чтобы изменение его непрозрачности не повлияло ни на что другое.
Ответы 1
Так что спасибо: Тао, который нашел время, чтобы ответить мне
Попробовав много вещей, я прочитал документацию и узнал, как это сделать!
Проблематично: «Я хочу изображение в качестве фона и прозрачный цвет над изображением».
Я объясню сам, поэтому я попытался применить css background-image и добавить к нему непрозрачность.
opacity
opacity изменит все элементы внутри выбранного вами элемента.
Когда я использовал opacity в Page, он даже изменил непрозрачность изображения, а это было не то, что я искал...
alpha(rgba)
А потом я подумал, что есть alpha = rgba(), и вы можете добиться прозрачности конкретного элемента, так что = «прозрачный цвет над изображением».
Итак, что я сделал, было очень просто, мне нужно было посмотреть, смогу ли я определить класс rgba для одного из дочерних элементов, и я выбрал: GridLayout (контейнер макета).
Поэтому я добавил background-color: rgba(0, 255, 0, 0.1), а затем у меня был цвет с прозрачностью.
И я включил компонент background-image on Page, и это помогло! :D
Я помещу его код со вторым кодом здесь:
<template>
<Page class = "ns-light page">
<ActionBar title = "Audio Mémo Manjak - Accueil"/>
<GridLayout width = "100%" height = "100%" columns = "*,*,*,*,*" rows = "auto,auto,auto,auto,auto" class = "layout">
<StackLayout v-for = "(card, index) of cards" :key = "index" :col = "`${ index % 5 }`" :row = "`${ index / 5 }`">
<Image :src = "card.src" style = "margin: 30px 15px;" @tap = "onTappedFun(card)"/>
</StackLayout>
</GridLayout>
</Page>
</template>
<style>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.page {
background-image: url("~/assets/images/cards/background.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.layout {
background-color: rgba(0, 255, 0, 0.1);
padding-top: 100%;
}
</style>
Ваш вопрос не ясен. Пожалуйста, подтвердите: у вас установлен
background-imageна<Page>, и вы хотите разместить полупрозрачный оверлей надbackground-image, но содержимое должно отображаться над оверлеем. Это верно?