background | 易学教程

CSS3背景与渐变

阅读更多关于 CSS3背景与渐变

一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、FireFox、Chrome、Safari、Opera 二、CSS3 背景图像定位 background-position （背景定位） background-position: px / % ...; background-origin（设置元素背景图片的原始起始位置） background-origin: padding-box|border-box|content-box; 兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera 三、CSS3 背景图像大小 background-size（指定背景图片大小） background-size: px / % / cover / contain; /*cover：把背景图片扩展至足够大，以使背景图片完全覆盖区域（即完全不留白） contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（至少满足一边不留白）*/ 兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera 四

Qt实现自定义滑动按钮

阅读更多关于 Qt实现自定义滑动按钮

　　今天记录下，使用Qt现有的组件，搭配来实现一个滑动按钮的效果。我看之前有人做过类似的，不过是在paintEvent事件里用画笔画的，我呢，比较懒，就使用现成的组件来实现吧，下面看下效果：　　　　这是利用自定义的类继承QWidget，里面再加一个QLabel，来实现上面的效果。顺便提一下，以后可以将自己做得组件保存下来，方便以后项目里使用。废话不多说，直接上核心代码，没玩过的，都来手动体验下吧。　　下面是头文件： #ifndef CUSTOMBUTTON_H #define CUSTOMBUTTON_H #include <QWidget> #include <QLabel> #include <QTimer> #include <QMouseEvent> #include <QStyleOption> #include <QPainter> class CustomButton : public QWidget { Q_OBJECT public: explicit CustomButton(QWidget *parent = nullptr,int width=50, int height=20); private: QLabel* myLabel; QTimer timer; int m_width; int m_height; int dir; int

[WPF疑难]在WPF中显示动态GIF

阅读更多关于 [WPF疑难]在WPF中显示动态GIF

简介：　　这是利用WPF作为前端技术，实现桌面版微信多客服系统。项目采用Prism作为前端框架，采用MVVM模式极好的对UI和逻辑代码分离，使用MefBootstrapper集成的MEF IOC容器，解耦各模块对象。合理利用 IEventAggregator 实现事件和交互。文章在介绍对应功能时候会给出相关实现的参考，读者可以参考改进，引入到自己的项目中。程序运行界面及功能预览：一、登陆：功能：支持记住用户和用户设置，可选择记住用户密码。实现相关：自定义登陆窗口，引入Microsoft.Windows.Shell。可参考 WPF Custom Chrome Library 和 MSDN WindowChrome Class 有相关自定义窗口实现。最小化、最大化、关闭按钮功能实现可参考上面的例子。登陆按钮，自定义Style，重写Button的Template，参考代码如下： <Style x:Key="LogginButton" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid > <Border x:Name="Bd" Background="

QLineEdit 仿QQ签名框

阅读更多关于 QLineEdit 仿QQ签名框

今天鼓捣了半天，终于实现了自定义Qt中的QlineEdit控件的大致效果。这个问题对于新手而言，主要有以下几个难点： 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式，可以省下很多代码 3.自定义相关事件 void mousePressEvent(QMouseEvent *event); // 鼠标点击的时候，编程输入框 void keyPressEvent(QKeyEvent *event); // 按下Enter的时候，处理 void mouseMoveEvent(QMouseEvent *event); // 鼠标移动的时候，显示效果 OK，下面我们来一步步实现这个自定义控件。首先，第一步你肯定是要创建一个新类继承QLineEdit， QtCreator会自动为你实现一些无关紧要的代码。第二步用PhotoShop做一个突出的高亮图片，像QQ签名框上的那样：。第三步开始实现具体的代码了。首先构造函数中需要设置一些QSS样式，这一步可以省下很多代码，具体样式对应的功能，请读者自行研究。 this->setStyleSheet("QLineEdit{ background:rgba(0,0,0,0%); border:1px; font:10pt}" "QLineEdit:hover{ border-image:url(:/btn

迷你MVVM框架 avalonjs 学习教程10、样式操作

阅读更多关于迷你MVVM框架 avalonjs 学习教程10、样式操作

一般情况下我们通过设置类名就可以改变元素的样式，但涉及到动画部分，就一定需要设置内联样式了，因此有了 ms-css 。* ms-css *的用法为 ms-css-样式名="样式值" ，如ms-css-width=”prop”(会自动补px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”。细细联想，ms-css与ms-class的旧风格、ms-data、ms-attr的用法相仿，属性名接第三个参数作为name，属性值作为value。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="avalon.js"></script> <script> var model = avalon.define({ $id: "test", background: "red" }) model.$watch("background", function(v) { model.background = v }) </script> </head> <body>

Css常用属性（背景，字体，div盒子等）

阅读更多关于 Css常用属性（背景，字体，div盒子等）

Css常用属性（背景，字体，div盒子等） 1.背景 1.背景颜色：background-color 2.将图像设置为背景:background-image:url(); 3.设置图像是否平铺：background-repeat：no-repeat 或 repeat-x 或repeat-y 4.设置背景图片是否随滚动条一起移动：background-attachment:fixed;固定住。 inherit：规定应该从父元素继承 background-attachment 属性的设置。默认属性scroll 5. background ：背景色背景图片平铺方式 background-color : red ; background-image : url(../img/logo.gif) ; background-repeat : no-repeat ; background-attachment : fixed ; background : #c9c9dd url(../img/logo.gif) no-repeat ; 2.字体 1.字体是否倾斜：font-style：normal(默认值)；italic或oblique显示倾斜字体；inherit规定应该从父元素继承字体样式。 2. 加粗：font-weight:normal(默认值);bold 定义粗体字符；bolder

鼠标选中文字变色

阅读更多关于鼠标选中文字变色

-moz-属性前缀是个火狐浏览器用的，而基本的::selection选择器是给谷歌浏览器用的。跟其它CSS选择器的用法一样，你可以嵌套使用，在不同的地方显示不同的颜色 1、两种不同的颜色： <html> <head> <meta charset="utf-8"> <title>新绿天设计博客</title> <style type="text/css"> /* webkit */ p.lightblue::selection { background:#33CC33; } /* mozilla firefox */ p.lightblue::-moz-selection { background:#33CC33; } /* webkit */ p.pink::selection { background:#FF9999; } /* mozilla firefox */ p.pink::-moz-selection { background:#FF9999; } </style> </head> <body> <p>用鼠标选中下面的文字，看看它们选中后是什么颜色!</p> <h2>绿色</h2> <p class="lightblue">自律由五条支柱支撑，它们分别是：认同事实（Acceptance）、意志力（Willpower）、面对困难（Hard Work）、勤奋

VUE实现Studio管理后台（完结）：标签式输入、名值对输入、对话框（modal dialog）

阅读更多关于 VUE实现Studio管理后台（完结）：标签式输入、名值对输入、对话框（modal dialog）

一周的时间，几乎每天都要工作十几个小时，敲代码+写作文，界面原型算是完成了，下一步是写内核的HTML处理引擎，纯JS实现。本次实战展示告一段落，等RXEditor下一个版本完成，再继续分享吧。剩下的功能：标签式输入、名值对输入、对话框（modal dialog），边框输入，全部完成。 css class输入，样式跟属性输入，效果：对话框（model dialog效果）前几期功能效果总览：标签输入框用来输入CSS class，名字一如既往的好听，就叫RxLabelInput吧。输入值一个数组，因为有多处要操作数组，增、删、改、克隆、比较等。比较好的一个方式是把Array类用继承的方式重写一下，把这写方法加到里面。但是RXEidtor内核用纯JS实现，并放在一个iFrame里面，它跟主界面只能通过windows message传递数据，带有方法的类无法作为消息被传递，暂时先不用这个方法，只把相关功能抽取成独立函数，放在valueOperate.js里面。如果以后数组操作量更大，再考虑转成一个通用的数组类。前几期介绍过，使用计算属性changed来标识数据是否被修改过，changed计算属性内部，需要比较两个值是否相等，普通字符串不会有问题，要比较数组用这样的方式最方便，先排序、转成字符串、比较字符串： aValue.sort().toString() === bValue

怎样让背景色覆盖border边框线？

阅读更多关于怎样让背景色覆盖border边框线？

今天写页面的时候出了一点点小问题，发现我设置的背景色与边框色颜色不一致，于是上网查了一下，竟然忘记了有个属性就可以实现让背景色覆盖边框线的问题！ background-clip 属性规定背景的绘制区域。语法： background-clip: border-box|padding-box|content-box; border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框使用: background-clip: border-box; 解决！！来源： CSDN 作者：孙婷婷的博客链接： https://blog.csdn.net/weixin_36732046/article/details/104756910

表格学习笔记

阅读更多关于表格学习笔记

五、表格 1.简介表格是一个规则的行列结构，每个表格是由若干行组成的，每行是由若干个单元格组成 table、row、column 2.基本结构 2.1table标签用来定义表结构常用属性： border属性：边框，默认值为0 width/height：宽度/高度 align水平对齐，取值：left（默认）、center、right bordercolor边框颜色 bgcolor：背景颜色 background：背景图片 cellspacing间距，单元格与单元格之间的间距 cellpading边距，单元格内容与边界之间的距离 2.2tr标签 table row 用来定义行常用属性： align：水平对齐，取值left（默认）、center、right valign：垂直对齐，取值：top、middle（默认）、bottom bgcolor：背景颜色 background：背景图片 2.3td标签 table data 用来定义单元格常用属性：align、valiqn、bgcolor、background 注意：表格是由行组成的，行必须由单元格组成，数据必须放到单元格中案例： 3.合并单元格也称为表格的跨行跨列两个属性： rowspan 设置单元格所跨的行数 colspan 设置单元格所跨的列数步骤： 1.在跨越的单元格中设置rowspan/colspan属性

订阅 background