Javascript 边框半径(如果边框上有图像)
使用React和Bootstrap构建一个简单的网站。我想为我的卡片设置一个自定义边界半径,但是当在卡片的上部设置时,它不会被渲染,因为它里面的图像(也是白色的)与容器本身重叠。 是否有css属性可以“平滑”img边界?你将如何解决这个问题 组成部分:Javascript 边框半径(如果边框上有图像),javascript,html,reactjs,css,Javascript,Html,Reactjs,Css,使用React和Bootstrap构建一个简单的网站。我想为我的卡片设置一个自定义边界半径,但是当在卡片的上部设置时,它不会被渲染,因为它里面的图像(也是白色的)与容器本身重叠。 是否有css属性可以“平滑”img边界?你将如何解决这个问题 组成部分: import React, { Component } from 'react'; import './App.css'; import logo from '../images/logo.png'; import tile1 from '../
import React, { Component } from 'react';
import './App.css';
import logo from '../images/logo.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
class App extends Component {
render() {
return (
<div>
<div className="App">
<br/>
<img src={logo} />
</div>
<br/>
<br/>
<br/>
<Container className="prova" fluid="true">
<Row>
<Col className="frame" xs="12" sm="4">
<Card className="card">
<CardImg className="cards" src={tile1} />
<CardBody>
<CardTitle> Recruitment Services</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardImg className="cards" src={tile2} alt="Card image cap" />
<CardBody>
<CardTitle>Web Design and Web-mastering</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
<Col xs="6" sm="4">
<Card>
<CardImg className="cards" src={tile3} alt="Card image cap" />
<CardBody>
<CardTitle>Digital Marketing</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
<Button>Discover More!</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
<br/>
<br/>
</div>
);
}
}
export default App;
在容器的CSS上尝试溢出:隐藏溢出:隐藏?是否尝试溢出:隐藏边框半径?谢谢。解决了的。我曾尝试手动渲染图像并添加自定义边框,但这是更好的方法
.App {
text-align: center;
background-image:
url('../images/arch1.jpg'), /*put the first one on the Top*/
url('../images/computer.jpg'),
url('../images/arch2.jpg');
animation: animatedBird 30s infinite;
height: 26rem;
}
@keyframes animatedBird {
0% {
background-image: url('../images/arch1.jpg');
}
10% {
background-image: url('../images/arch1.jpg');
}
25% {
background-image: url('../images/computer.jpg');
}
35% {
background-image: url('../images/computer.jpg');
}
50% {
background-image: url('../images/arch2.jpg');
}
60% {
background-image: url('../images/arch2.jpg');
}
75% {
background-image: url('../images/computer.jpg');
}
100% {
background-image: url('../images/arch1.jpg');
}
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
#navbar {
height: 150px;
}
.cards {
max-height: 200px;
width: auto;
height: auto;
}
.prova {
max-width: 80%;
}
.card {
width: 24rem;
height: 26rem;
text-align: center;
border-radius: 34px !important;
}
.frame {
border-radius: 34% !important;
}