css 设置无背景色

devtools/2024/9/23 19:00:57/

文章目录

  • 问题描述
  • 解决方案
    • 代码示例
    • 设置无背景色

问题描述

大家好!我是夏小花,今天是2024年4月22日|农历三月十四,今天这篇文章主要以去除背景颜色为主题 ,详细代码如下

解决方案

这段是vue页面中的 代码,现在我要将

<view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: -20rpx auto;">

这view的背景色改为透明色,具体实现思路如下:

代码示例

<template><view><view class="search_view"><uni-search-bar placeholder="输入关键词进行查询" v-model="inputValue" bgColor="#f3f3f3" @confirm="search" @input="input" class="search_bar"/><view><view style="margin: 0 auto;margin-top: 40rpx; width: 100%;"><view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: -20rpx auto;"><!-- 使用v-for来遍历aiqingList数组 --><view v-for="(aiqing, tuijindex) in aiqingList"style="width: 30.5%; margin: 10rpx; box-sizing: border-box; display: flex; flex-direction: column;"@click="jumpPage(aiqing.id)"><imagestyle="height: 330rpx; width: 100%; border-radius: 10rpx;":src="aiqing.filmImg"></image><view class="view-style">{{aiqing.filmGoLive == 0 ? '热播' : aiqing.filmGoLive == 1 ? '预播' : '云首播'}}</view><view style="text-align: center; margin-top: 10rpx; font-weight: bold; letter-spacing: 2rpx; font-size: 32rpx;">{{aiqing.filmName}}</view></view></view></view></view></view></view>
</template>

设置无背景色

在需要设置view的代码块中添加css样式

background-color:transparent;

http://www.ppmy.cn/devtools/8815.html

相关文章

关于前端的那些知识点

1.CommonJs和Es6(ECMAScript 6 )模块化的相同点和不同点 // 相同点: // ---对引入的对象赋值,即对象内部的值的改变// 不同点: // 1.CommonJs require模块运行时加载,而Es6模块编译时输出接口 // 2.CommonJs require模块同步加载(排队加载),而es6模块异步加载(就是同时…

fabricjs控制背景图和画布图片展示

一、控制背景图展示 1.检查画布是否存在背景 在Fabric.js中&#xff0c;可以通过检查canvas.backgroundImage属性来判断画布是否设置了背景图片。如果canvas.backgroundImage不为null或undefined&#xff0c;则表示画布上设置了背景图片。 // 假设canvas是你的fabric.Canvas…

.net反射(Reflection)

文章目录 一.概念&#xff1a;二.反射的作用&#xff1a;三.代码案例&#xff1a;四.运行结果&#xff1a; 一.概念&#xff1a; .NET 反射&#xff08;Reflection&#xff09;是指在运行时动态地检查、访问和修改程序集中的类型、成员和对象的能力。通过反射&#xff0c;你可…

学习微服务nacos遇到的问题

在学习微服务注册到nacos的时候&#xff0c;所有过程都正确了&#xff0c;注册也成功了&#xff0c;但是访问不了调用的地址报错出现问题。 一、引入依赖 在cloud-demo父工程的pom文件中的<dependencyManagement>中引入SpringCloudAlibaba的依赖 1、springboot <pa…

FPGA Quartus IP核 打开使用

两种Quartus版本下的IP核&#xff0c;从使用者的角度来看仅仅是配置界面不同&#xff0c;在参数设置和使用方法上基本一致。本文以“MegaWizard Plug-In Manager”中的FIR Compiler IP核使用为例。 Quartus的FIR IP核属于收费IP&#xff0c;如果是个人学习使用需要对IP核单独破…

半导体制造工艺之分类浅述

半导体制造工艺分为逻辑制程(也叫逻辑工艺)和特殊制程(也叫特色工艺)。 1、逻辑工艺概述 随着集成电路行业沿着摩尔定律不断发展,晶体管数量增加的同时,工艺节点不断缩小。先进逻辑工艺是相对的概念,2005年全球先进逻辑工艺的工艺节点在65/55纳米,现在则变为3纳米。中…

基于CH32V103的多功能推杆设计

一、项目简介 “创意源于生活&#xff0c;工具始于懒惰。” 整体造型外观参考了最近比较火的夫妻游戏《双人成行》第一关里面那个吸尘器的推杆开关&#xff0c;结构中采用阻尼器/滚珠轴承等器件&#xff0c;使其非常具有质感和手感。功能上我构思不能只有电脑开关这么简单地一…

pnpm v9 正式发布,已停止 Node.js v16 支持

近日&#xff0c;pnpm v9.0.0 正式发布&#xff01;带来了一系列重大更新和改进&#xff0c;让你的开发体验更加顺畅。现在可以通过 npm install -g pnpm 来升级 pnpm 到最新版本&#xff0c;接下来让我们一起看一下 pnpm v9 有哪些亮眼的新功能吧。 &#x1f525; Node.js 支持…