Я пытаюсь сделать собственный значок использовать изображение, но не работает
это мой код
button className = "btn-play" style = {btnplaylist}>
<i className = "btnplaylist"></i>
</button>
это css
.btnplaylist {
background-image: url("../icon/playlist.png");
}
.btn-play {
background-color: transparent;
border-radius: 25px;
padding: 8px 12px;
border-color: transparent;
color: white;
font-size: 2vh;
outline: none;
}
.btn-play:hover {
background-color: rgb(39, 39, 39);
}
это изображение
Кто-нибудь может мне помочь ? Спасибо :)
🤔 А знаете ли вы, что...
HTML был создан Тимом Бернерсом-Ли в 1989 году.
Привет, Рики,
Я не совсем понял ваш запрос, однако я собрал этот фрагмент, чтобы вы могли использовать его в качестве руководства по вашему собственному коду. Как видите, я добавил в CSS несколько основных правил отображения, чтобы вы могли видеть свой элемент на экране.
Кроме того, я должен упомянуть, что вам нужно проверить, какую папку вы используете для рендеринга этого изображения заметки (относительные или абсолютные URL-адреса), поскольку это может быть проблемой при рендеринге этого в React. Лучше всего использовать относительный URL-адрес корневого каталога вашего приложения.
Для получения дополнительной информации о статическом контенте в React перейдите по этой ссылке.
Я, конечно, надеюсь, что это может помочь в вашем случае. Ура и продолжайте кодить, это лучшая вещь в мире!
// declare the functional component for the button
const CreateIconButton = props =>{
return (
<button className = "btn-play">
<i className = "btnplaylist"></i>
</button>
);
}
// Main component will be a class component
class RenderIconButton extends React.Component{
render(){
return(<div><CreateIconButton /></div>);
}; // End of Render
} // End of class component
// Let us render all in the root div on the DOM
ReactDOM.render(
<RenderIconButton />, document.getElementById('root')
);.btnplaylist {
background-image: url("https://i.stack.imgur.com/vD6k6.png");
background-size: cover;
width: 200px;
height: 200px;
display:block;
}
.btn-play {
background-color: transparent;
border-radius: 25px;
padding: 8px 12px;
border: 1px dotted #ccc;
color: white;
font-size: 2vh;
outline: none;
}
.btn-play:hover {
background-color:yellow;
border:1px solid #333;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<!-- This is the root div to render all react content -->
<div id = "root"></div>