Есть ли в JSS эквивалент цвета фона + изображения?

Я использую JSS в React для стилизации компонентов Material UI. Я попытался просмотреть в Интернете эквивалент приведенного ниже кода из CSS в JSS, но безуспешно.

 background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    ,
   url('myUrl');

Может ли кто-нибудь помочь мне выяснить, есть ли способ добиться того же результата в JSS.


reactjs material-ui jss
person Malaba Eric    schedule 28.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ниже приведен рабочий пример правильного синтаксиса. Все значение фонового изображения (линейный градиент — это изображение, а не цвет) помещается в одну строку.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  gradientAndUrl: {
    width: "400px",
    height: "400px",
    backgroundImage:
      "linear-gradient(rgba(64, 153, 255, 0.5), rgba(64, 153, 255, 0.5)), url(https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg)"
  }
});

export default function App() {
  const classes = useStyles();
  return <div className={classes.gradientAndUrl} />;
}

Изменить градиент фонового изображения и URL

Связанный ответ: Как добавить цвет линейного градиента в Slider ?

person Ryan Cogswell    schedule 28.05.2020
comment
Спасибо, Райан, это сработало. Меня смутило то, что я думал, что градиенты - это цвета, теперь я знаю, что это фоновые изображения. Как только я использовал их в качестве фонового изображения вместе с другим изображением, это сработало как шарм. Спасибо еще раз - person Malaba Eric; 28.05.2020