Использовать путь изображения Javascript внутри класса CSS - PullRequest
Новая
       2

Использовать путь изображения Javascript внутри класса CSS

0 голосов
/ 30 января 2019

Фон

На веб-сайте отображается путь к изображению маски, как показано ниже: 

<script>
var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
</script>

Я разрешаю пользователю загружать файлыизображение внутри маски image ....

Как только пользователь загрузит изображение, я заполняю пользователь загрузил изображение внутри mask image:

1.Mask image :

enter image description here

2. Пользователь загрузил изображение :

enter image description here

3. Пользователь загрузил изображение в маске [Окончательное изображение]:

enter image description here

Codepen: https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle: http://jsfiddle.net/2xq8p0zy/

HTML 

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

css 

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Требование :

Здесь, чтобы заполнить загруженное изображение внутри изображения маски, я использую код CSS ниже для отображения изображения маски .... Но вместо использования маски кода CSSimage, я хочу использовать html code mask image в этом процессе ......

css mask image image 

-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);

HTML-код изображения маски : 

<script>
    var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }
    </script>

1 Ответ

0 голосов
/ 31 января 2019

Вам придется изменить стиль программно в вашем JS.Как это: 

const targetDiv = document.getElementById('target')

function changeColorTo(hex) {
  // you can change single attributes like this
  targetDiv.style.backgroundColor = hex
  
  // alternatively you can override all of the local styles like this
  targetDiv.setAttribute('style', `background-color:${hex};`)
  // or
  targetDiv.style.cssText = `background-color:${hex};`
}
#target {
  width: 5rem;
  height: 5rem;
  border: 1px solid black;
}
<div id="target"></div>
<button onclick="changeColorTo('#00f')">Change to Blue</button>
<button onclick="changeColorTo('#0f0')">Change to Green</button>
<button onclick="changeColorTo('#f00')">Change to Red</button>

Таким же образом вы можете изменить маску: 

target.style.webkitMaskImage = 'url(https://…)'
target.style.maskImage = 'url(https://…)'
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...