css设置背景图片和边框背景

6 篇文章 0 订阅
5 篇文章 0 订阅
本文介绍了如何在React应用中使用TypeScript来设置页面背景图片和边框图片。通过修改CSS样式,实现了背景图片全屏固定以及边框使用自定义图片并进行拉伸填充。
摘要由CSDN通过智能技术生成

介绍一个网站,在这个网站里可以找到各种好看的背景图片和边框图片。

数据大屏

 

(代码是react+ts,使用时请自行转换)

 一:设置页面背景图片

css部分
.productionBoard {
  width: 100%;
  height: 100%;
  padding: 0 2rem;
  box-sizing: border-box;
  background-image: url("./background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  z-index: -4;
}
index部分
import React from "react";
import styles from "./index.module.less"


const ProductionBoard: React.FC = ()=>{
  return(<div className={styles.productionBoard}>这里是工作台</div>)
}


export default ProductionBoard

二:设置边框的背景

 css部分
.cardItem {
    width: 30%;
    height: 200px;
    color: #ffffff;
    border: double white 1rem;
    border-image: url("./border.png") 27 round stretch;
  }
index部分
import React from "react";
import styles from "./index.module.less"


const ProductionBoard: React.FC = ()=>{
  return(<div className={styles.productionBoard}>
    <div className={styles.cardItem}>设置边框的背景</div>
  </div>)
}

export default ProductionBoard

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 CSS 中的 linear-gradient() 函数来实现 div 的渐变背景和渐变边框。 下面是一个设置渐变背景和渐变边框的示例代码: ```html <div class="gradient-box"></div> ``` ```css .gradient-box { width: 200px; height: 200px; background: linear-gradient(to bottom right, #ff0080, #ff8c00); border: 2px solid; border-image: linear-gradient(to bottom right, #ff0080, #ff8c00) 1; } ``` 在上面的代码中,使用 `background` 属性来设置 div 的渐变背景。`linear-gradient()` 函数中的参数 `to bottom right` 表示渐变方向为从左上角到右下角,`#ff0080` 和 `#ff8c00` 分别表示渐变的起始颜色和结束颜色。 使用 `border` 属性来设置 div 的边框,同时使用 `border-image` 属性来设置边框的渐变。`linear-gradient()` 函数中的参数同样表示渐变方向,`1` 表示边框宽度为 1 像素。 需要注意的是,`border-image` 属性在一些浏览器中可能不被支持,此时可以使用 `background-clip` 属性来实现相同的效果。代码如下: ```css .gradient-box { width: 200px; height: 200px; background: linear-gradient(to bottom right, #ff0080, #ff8c00); border: 2px solid transparent; padding: 2px; background-clip: content-box, border; } ``` 在上面的代码中,使用 `padding` 属性来为 div 添加内边距,同时将 `border` 属性的颜色设置为 `transparent`,使边框不可见。使用 `background-clip` 属性来指定背景的绘制区域,`content-box` 表示背景仅在内容区域绘制,`border` 表示背景边框区域绘制。这样,就可以实现相同的渐变边框效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值